:root{
  --paper:#f6efe2;
  --paper-warm:#f1e5d2;
  --ink:#11100e;
  --gold:#b38a45;
  --gold-soft:rgba(179,138,69,.55);
  --line:rgba(179,138,69,.55);
}

*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.78), transparent 36rem),
    radial-gradient(circle at 92% 18%, rgba(226,188,129,.10), transparent 36rem),
    var(--paper);
  font-family:"Montserrat",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

a{color:inherit;text-decoration:none}

.sheet{
  min-height:100svh;
  width:min(1536px,100%);
  margin:0 auto;
  padding:clamp(24px,3.2vw,50px) clamp(24px,3.3vw,54px) clamp(26px,3vw,48px);
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:34px;
}

.agency-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  font-size:clamp(8px,.78vw,12px);
  font-weight:500;
  letter-spacing:.18em;
  white-space:nowrap;
}
.agency-meta i{
  height:25px;
  width:1px;
  background:var(--gold-soft);
}
.agency-meta a{
  letter-spacing:0;
  font-weight:500;
}
.agency-meta a:hover,
.contact a:hover{color:var(--gold)}

.hairline{
  height:1px;
  background:var(--line);
  margin-top:clamp(16px,1.4vw,23px);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(470px,.92fr) minmax(560px,1.18fr);
  grid-template-areas:
    "lead visual"
    "details visual";
  column-gap:clamp(30px,3.5vw,58px);
  align-items:start;
}

.lead{
  grid-area:lead;
  padding-top:clamp(30px,3vw,48px);
  position:relative;
  z-index:2;
}
h1{
  margin:0;
  font-family:"Bodoni Moda","Times New Roman",serif;
  font-weight:500;
  font-size:clamp(52px,5.15vw,82px);
  line-height:.94;
  letter-spacing:.02em;
  white-space:nowrap;
}
.hero-brand{
  display:flex;
  align-items:center;
  gap:clamp(18px,2vw,30px);
}
.hero-icon{
  width:clamp(78px,6.4vw,104px);
  height:clamp(78px,6.4vw,104px);
  object-fit:contain;
  flex:none;
}
.hero-brand-copy{min-width:0}
.hero-subbrand{
  margin:10px 0 0;
  color:var(--gold);
  font-size:clamp(8px,.72vw,11px);
  font-weight:500;
  letter-spacing:.27em;
  line-height:1.5;
}
.positioning{
  margin:clamp(28px,2.5vw,38px) 0 0;
  font-family:"Bodoni Moda","Times New Roman",serif;
  font-size:clamp(24px,2vw,32px);
  line-height:1.15;
  font-weight:500;
  letter-spacing:.01em;
}

.ornament{
  display:flex;
  align-items:center;
  gap:25px;
  width:min(100%,540px);
  margin:clamp(18px,1.6vw,25px) 0 14px;
}
.ornament span{
  height:1px;
  background:var(--gold-soft);
  flex:1;
}
.ornament b{
  color:var(--gold);
  font-size:15px;
  font-weight:400;
}
.services{
  margin:0;
  font-size:clamp(10px,1vw,15px);
  font-weight:600;
  letter-spacing:.24em;
  line-height:1.8;
}
.services b,.genres b{color:var(--gold);margin:0 .55em;font-weight:500}
.intro{
  max-width:610px;
  margin:clamp(18px,1.7vw,26px) 0 0;
  font-family:"Bodoni Moda","Times New Roman",serif;
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.52;
}

.visual{
  grid-area:visual;
  margin:0;
  align-self:start;
  min-height:calc(100svh - 145px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:visible;
  padding-top:clamp(24px,2.6vw,42px);
  position:sticky;
  top:18px;
}
.visual img{
  width:100%;
  height:auto;
  max-height:calc(100svh - 72px);
  object-fit:contain;
  object-position:center bottom;
  display:block;
}

.details{
  grid-area:details;
  padding-top:clamp(24px,2.2vw,34px);
  max-width:640px;
}
.details h2{
  color:var(--gold);
  margin:0;
  font-size:clamp(12px,1.05vw,16px);
  line-height:1.35;
  font-weight:600;
  letter-spacing:.085em;
}
.section-rule{
  width:100%;
  max-width:560px;
  height:1px;
  background:var(--gold-soft);
  margin:8px 0 14px;
}
.section-rule.short{max-width:460px}
.genres{
  margin:0;
  font-size:clamp(9px,.88vw,13px);
  line-height:1.7;
  font-weight:600;
  letter-spacing:.10em;
}
.orbit{
  margin:14px 0 0;
  font-family:"Bodoni Moda","Times New Roman",serif;
  font-style:italic;
  font-size:clamp(16px,1.28vw,20px);
  line-height:1.45;
  max-width:590px;
}
.agency{
  margin-top:clamp(22px,2.1vw,32px);
}
.agency p{
  margin:0;
  max-width:555px;
  font-family:"Bodoni Moda","Times New Roman",serif;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.45;
}
.contact{
  margin-top:clamp(18px,1.6vw,24px);
}
.contact-label{
  margin:0 0 8px;
  color:var(--gold);
  font-size:clamp(11px,.95vw,15px);
  font-weight:600;
  letter-spacing:.12em;
}
.contact a{
  font-size:clamp(15px,1.25vw,19px);
  font-weight:600;
}
.closing{
  margin-top:clamp(26px,2.4vw,36px);
}
.ornament.compact{
  margin:0 0 12px;
  width:min(100%,510px);
}
.closing p{
  margin:0;
  color:var(--gold);
  font-family:"Bodoni Moda","Times New Roman",serif;
  font-style:italic;
  font-size:clamp(31px,3vw,48px);
  line-height:1.05;
}

/* Medium desktop / tablet landscape */
@media(max-width:1120px){
  .hero-grid{
    grid-template-columns:minmax(390px,.95fr) minmax(420px,1.05fr);
    column-gap:26px;
  }
  .agency-meta{gap:10px}
  .visual{min-height:0}
  .visual img{max-height:calc(100svh - 82px)}
}

/* Tablet portrait + phone: storytelling becomes vertical */
@media(max-width:860px){
  .sheet{padding:22px 20px 32px}
  .site-header{align-items:flex-start}
  .agency-meta{
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
    font-size:8px;
    padding-top:3px;
  }
  .agency-meta i{display:none}

  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"lead" "visual" "details";
  }
  .lead{padding-top:34px}
  .hero-brand{gap:16px}
  .hero-icon{width:66px;height:66px}
  h1{font-size:clamp(42px,8.4vw,64px)}
  .hero-subbrand{font-size:7px;letter-spacing:.18em}
  .positioning{font-size:24px;margin-top:24px}
  .intro{font-size:19px}
  .visual{
    min-height:0;
    margin:30px -20px 0;
    padding-top:0;
    position:static;
    top:auto;
    overflow:hidden;
  }
  .visual img{
    width:100%;
    max-height:none;
  }
  .details{
    max-width:none;
    padding-top:34px;
  }
  .details .section-rule{max-width:100%}
  .territory,.agency,.contact,.closing{max-width:680px}
  .closing p{font-size:40px}
}

/* Phone */
@media(max-width:560px){
  .site-header{
    display:flex;
    justify-content:flex-end;
  }
  .agency-meta{
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    width:auto;
    padding-top:0;
    font-size:8px;
  }
  .agency-meta i{display:block;height:14px}
  .hairline{margin-top:13px}

  .lead{padding-top:32px}
  .hero-brand{
    align-items:flex-start;
    gap:12px;
  }
  .hero-icon{
    width:54px;
    height:54px;
  }
  h1{
    font-size:clamp(37px,10.8vw,52px);
    line-height:.98;
    white-space:normal;
  }
  .hero-subbrand{
    margin-top:8px;
    font-size:6.5px;
    letter-spacing:.14em;
  }
  .positioning{
    margin-top:22px;
    font-size:21px;
    line-height:1.1;
  }
  .ornament{gap:15px;margin:24px 0 19px}
  .services{
    font-size:9px;
    letter-spacing:.16em;
  }
  .services b{margin:0 .34em}
  .intro{
    font-size:17px;
    line-height:1.48;
  }
  .visual{margin-top:26px}
  .details{padding-top:30px}
  .genres{
    font-size:9px;
    letter-spacing:.08em;
  }
  .orbit{font-size:17px}
  .agency{margin-top:30px}
  .agency p{font-size:16px;line-height:1.5}
  .contact a{font-size:16px}
  .closing{margin-top:36px}
  .closing p{font-size:34px}
}