:root{--paper:#f7f7f2;--ink:#191a17;--gold:#b39151;--line:#d5d5ce}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:#cbb37f;color:#171816}a:focus-visible,button:focus-visible,.service-trigger:focus-visible{outline:2px solid #977330;outline-offset:7px}.skip{position:absolute;top:-70px;padding:12px;background:white;z-index:5}.skip:focus{top:0}header{height:126px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.wordmark{font-weight:800;font-size:27px;letter-spacing:-1.6px;line-height:.82;display:inline-flex;flex-direction:column}.wordmark span{font-size:39px;letter-spacing:-2.5px}.wordmark i{font-style:normal;font-size:12px;vertical-align:top;margin-left:3px;letter-spacing:0}nav{display:flex;gap:40px;align-items:center;font-size:15px}nav a:hover{color:#8a682e}.contact-link{border-bottom:0;padding:10px 0}.contact-link span{margin-left:25px}.menu-toggle{display:none}.hero{padding:36px 5% 0}.hero-top,.hero-bottom,.section-label{display:flex;align-items:center;justify-content:space-between;gap:25px}.eyebrow,.location,.section-label{font-size:12px;letter-spacing:1.1px;line-height:1.5;font-weight:600}.hero h1{font-weight:500;letter-spacing:-.075em;font-size:clamp(72px,10.65vw,174px);line-height:.98;margin:52px 0 38px}.hero h1 span{color:var(--gold)}.hero-bottom{margin-bottom:53px}.hero-bottom p{font-size:18px;line-height:1.55}.round-link{display:flex;align-items:center;gap:20px;font-size:14px}.round-link b{border:1px solid #898a82;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:400;transition:background .2s}.round-link:hover b{background:#e1ceaa}.hero-art{position:relative;background:#181916;overflow:hidden;aspect-ratio:1.94}.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 49%}.art-caption{position:absolute;inset:auto 4% 6%;display:flex;align-items:end;justify-content:space-between;color:#f2e8d0;font-size:12px;letter-spacing:1.7px;line-height:1.5}.art-monogram{font-size:42px;letter-spacing:-3px;font-weight:700}.section-pad{padding:100px 5%}.section-label{margin-bottom:68px}.intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:10%}h2{font-size:clamp(40px,5.6vw,88px);font-weight:500;line-height:1.08;letter-spacing:-.06em;margin:0}em{font-style:normal;color:var(--gold)}.intro-copy{padding-top:10px;max-width:480px}.intro-copy p{font-size:20px;line-height:1.6;margin:0 0 25px}.intro-copy p+p{font-size:17px;color:#5b5e54}.text-link{display:flex;justify-content:space-between;max-width:225px;border-bottom:1px solid;margin-top:38px;padding-bottom:13px;font-size:15px}.expertise{background:#eeeee7}.expertise-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:70px}.expertise-heading p{font-size:17px;line-height:1.6;margin:0 8% 4px 0}.services .service{border-top:1px solid #b9b9af}.services .service:last-child{border-bottom:1px solid #b9b9af}.service-trigger{display:flex;align-items:center;cursor:pointer;gap:5%;padding:31px 0;list-style:none}.service-trigger::-webkit-details-marker{display:none}.number{font-size:13px;color:#63665b}h3{font-size:clamp(27px,3.25vw,49px);letter-spacing:-.045em;font-weight:400;margin:0}.plus{font-size:32px;font-weight:300;margin-left:auto;transition:transform .2s}.service.is-open .plus{transform:rotate(45deg)}.service-body{margin:0 0 34px 7%;max-width:670px}.service-body p{font-size:17px;line-height:1.7;margin:0 0 25px;color:#505348}.service-body span{font-size:12px;letter-spacing:.8px}.statement{background:#ad894d;color:var(--ink);padding-top:85px;padding-bottom:38px}.statement .eyebrow{color:var(--ink)}.statement-title{font-size:clamp(40px,6.6vw,102px);line-height:1.1;letter-spacing:-.06em;margin:55px 0 95px}.statement-title em{color:var(--paper)}.statement-foot{border-top:1px solid #191a174d;padding-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1px}.contact{padding-bottom:80px}.contact-title{display:block;position:relative;font-size:clamp(40px,6.8vw,106px);line-height:1.09;letter-spacing:-.065em;padding-right:70px}.contact-title>span{position:absolute;right:0;top:5%;font-size:90px;transition:transform .2s}.contact-title:hover>span{transform:translate(7px,-7px)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:60px;font-size:17px}.contact-bottom a{border-bottom:1px solid;padding-bottom:9px}footer{margin:0 5%;border-top:1px solid var(--line);padding:40px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}footer .wordmark{font-size:19px}footer .wordmark span{font-size:28px}.mobile-menu[hidden]{display:none}@media(min-width:1500px){body{max-width:2000px;margin:auto}}@media(max-width:700px){header{height:100px}header nav{display:none}.wordmark{font-size:23px}.wordmark span{font-size:33px}.menu-toggle{display:flex;align-items:center;gap:16px;border:0;background:none;font-size:14px;padding:12px 0}.menu-toggle span{font-size:24px}.mobile-menu{padding:25px 5%;border-bottom:1px solid var(--line);flex-direction:column;align-items:start;gap:24px}.hero{padding-top:24px}.location{display:none}.hero h1{font-size:clamp(54px,12.9vw,90px);margin:35px 0 24px}.eyebrow,.section-label{font-size:11px}.hero-bottom{align-items:end;margin-bottom:30px;gap:15px}.hero-bottom p{font-size:15px;margin:0;max-width:260px}.desktop{display:none}.round-link>span{display:none}.round-link b{width:45px;height:45px;flex-shrink:0}.hero-art{aspect-ratio:.98}.hero-art img{object-position:center}.art-caption{font-size:10px;letter-spacing:1px}.art-monogram{font-size:30px}.section-pad{padding:60px 5%}.section-label{margin-bottom:38px}.section-label>span:nth-child(2){display:none}.intro-grid{grid-template-columns:1fr;gap:35px}.intro-copy{max-width:none}.intro-copy p{font-size:18px}.intro-copy p+p{font-size:16px}.expertise-heading{display:block;margin-bottom:40px}.expertise-heading p{margin:25px 0 0;font-size:16px}.service-trigger{padding:26px 0;gap:7%}.service-body{margin-left:0}.service-body p{font-size:16px}.service-body span{font-size:11px}.statement-title{font-size:clamp(33px,7.9vw,55px);margin:40px 0 60px}.statement-foot{font-size:10px;letter-spacing:.5px}.contact-title{font-size:clamp(32px,8vw,56px);padding-right:25px}.contact-title>span{font-size:36px}.contact-bottom{align-items:start;flex-direction:column;margin-top:30px;font-size:16px}footer{flex-wrap:wrap;display:grid;grid-template-columns:1fr 1fr;row-gap:32px}footer p{font-size:12px;text-align:right}footer>a:last-child{text-align:right}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Medya Nobel: original identity and display typography. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/manrope-bold.ttf') format('truetype')}
.wordmark .brand-logo{display:block;width:174px;height:auto}footer .wordmark .brand-logo{width:145px}
.hero h1{font-family:'Manrope',Arial,Helvetica,sans-serif;font-weight:700;font-size:clamp(72px,10.25vw,164px);letter-spacing:-.068em;line-height:1.08;margin-top:42px;margin-bottom:28px}
@media(max-width:700px){.wordmark .brand-logo{width:145px}.hero h1{font-size:clamp(49px,12.35vw,86px);letter-spacing:-.063em;line-height:1.1;margin-top:30px;margin-bottom:25px}}
/* Reference marks: restrained monochrome, continuous single-row presentation. */
.brands{padding:52px 0 35px;margin:0 5%;border-bottom:1px solid var(--line);position:relative}
.brands-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.brands-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;font-weight:400;letter-spacing:0;color:#61645a}
.brands-toggle{font:inherit;font-size:12px;display:flex;align-items:center;gap:7px;color:#61645a;background:none;border:0;cursor:pointer;padding:10px 0;white-space:nowrap}.brands-toggle:hover{color:var(--ink)}
.brand-filter{position:absolute;pointer-events:none}
.brands-window{overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.brands-window::-webkit-scrollbar{display:none}.brands-window:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.brands-track{display:flex;width:max-content}.brands-group{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex-shrink:0}
.brand-item{width:200px;height:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-item svg{display:block;max-width:136px;max-height:56px;overflow:visible}
.brands.is-animated .brands-window{overflow:hidden}.brands.is-animated .brands-track{animation:brand-drift 304s linear infinite;will-change:transform}
.brands.is-paused .brands-track,.brands-window:focus-within .brands-track{animation-play-state:paused}
@media(hover:hover){.brands-window:hover .brands-track{animation-play-state:paused}}
@keyframes brand-drift{to{transform:translateX(-50%)}}
@media(max-width:700px){.brands{padding-top:30px;padding-bottom:25px}.brands-heading{gap:12px;margin-bottom:12px}.brands-heading h2{font-size:13px;max-width:230px}.brands-toggle-label{display:none}.brands-toggle{font-size:17px;padding:12px}.brand-item{width:156px;height:85px}.brand-item svg{max-width:115px;max-height:49px}}
@media(prefers-reduced-motion:reduce){.brands.is-animated .brands-window{overflow-x:auto}.brands.is-animated .brands-track{animation:none;transform:none}.brands-group[aria-hidden="true"]{display:none}.brands-toggle{display:none}}

/* Playfair Display for headings; body and navigation retain their sans serif. */
@font-face{font-family:'Playfair Display';src:url('assets/playfair-display-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
h1,h2,h3,.hero h1,.statement-title,.contact-title,.brands-heading h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.025em}
.hero h1{font-size:clamp(72px,10.25vw,164px);line-height:1.12;letter-spacing:-.035em}
h2{line-height:1.16}h3{line-height:1.25;letter-spacing:-.015em}
.statement-title,.contact-title{line-height:1.18}
.brands-heading h2{font-size:16px;line-height:1.5;letter-spacing:0}
.contact-title>span{font-family:Arial,Helvetica,sans-serif}
@media(max-width:700px){.hero h1{font-size:clamp(48px,12vw,84px);line-height:1.14;letter-spacing:-.035em}.statement-title{font-size:clamp(28px,7.5vw,50px);letter-spacing:-.025em}.contact-title{font-size:clamp(30px,7.7vw,54px);letter-spacing:-.025em}.brands-heading h2{font-size:15px}}

/* User-supplied LEMON MILK Medium, with spacing sized for its uppercase glyphs. */
@font-face{font-family:'LEMON MILK';src:url('assets/lemon-milk-medium.otf') format('opentype');font-style:normal;font-weight:500;font-display:swap}
h1,h2,h3,.hero h1,.statement-title,.contact-title,.brands-heading h2{font-family:'LEMON MILK',Arial,sans-serif;font-weight:500;letter-spacing:-.02em}
.hero h1{font-size:clamp(64px,9.3vw,148px);line-height:1.17;letter-spacing:-.025em}
h2{font-size:clamp(32px,4.1vw,66px);line-height:1.23}
h3{font-size:clamp(24px,2.8vw,43px);line-height:1.3}
.statement-title{font-size:clamp(36px,6.3vw,98px);line-height:1.25}
.contact-title{font-size:clamp(36px,6.3vw,98px);line-height:1.25}
.brands-heading h2{font-size:13px;line-height:1.65;letter-spacing:0}
@media(max-width:700px){.hero h1{font-size:clamp(44px,11.2vw,78px);line-height:1.2;letter-spacing:-.025em}h2{font-size:clamp(26px,7.5vw,48px);line-height:1.28}h3{font-size:clamp(22px,5.8vw,32px)}.statement-title{font-size:clamp(24px,7vw,46px);line-height:1.3;letter-spacing:-.025em}.contact-title{font-size:clamp(26px,6.9vw,48px);line-height:1.3;letter-spacing:-.025em}.brands-heading h2{font-size:11px;line-height:1.7}}

/* Service disclosure layout. */
.services .service{overflow:visible}
.services .plus{transition:transform .6s cubic-bezier(.22,1,.36,1)}

/* Keep the hero tagline close to the main heading. */
.hero h1{margin-bottom:20px}
.hero-bottom{align-items:flex-start}
.hero-bottom p{margin:0;max-width:none}
@media(max-width:700px){.hero h1{margin-bottom:14px}.hero-bottom{flex-wrap:wrap;align-items:center}.hero-bottom p{font-size:14px}.hero-bottom .round-link{margin-left:auto}}

/* Longer process headings wrap while keeping the disclosure control visible. */
.services .service-title{flex:1;min-width:0;overflow-wrap:break-word}
.services .service-trigger .number,.services .service-trigger .plus{flex-shrink:0}
@media(max-width:700px){.services .service-trigger{gap:5%}.services .service-title{font-size:clamp(18px,4.8vw,30px)}}

/* Panton ExtraBold for the five process headings. */
@font-face{font-family:"Panton";src:url("assets/panton-extrabold.woff") format("woff");font-style:normal;font-weight:800;font-display:swap}
.services .service-title{font-family:"Panton",Arial,sans-serif;font-weight:800;text-transform:none}

/* Shared columns align the process title, description and keywords. */
.services{--service-number-width:18px;--service-column-gap:5%}
.services .service-trigger{display:grid;grid-template-columns:var(--service-number-width) minmax(0,1fr) auto;column-gap:var(--service-column-gap)}
.services .service-body{margin-left:calc(var(--service-number-width) + var(--service-column-gap))}

/* Bring process descriptions closer without changing closed-row spacing. */
.services .service-body{margin-top:-18px}
.services .service-body p{margin-bottom:0}
.round-link b{transition:background .2s,color .2s,border-color .2s}
.round-link:hover b,.round-link:focus-visible b{background:var(--gold);border-color:var(--gold);color:#fff}

/* About: existing brand story and office photograph. */
.about{border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}
.about h1{font-size:clamp(32px,4.2vw,66px);line-height:1.24}
.about-since{margin:32px 0 0;color:#806332;font-size:13px;letter-spacing:1.5px}
.about-copy p{font-size:17px;line-height:1.7;margin:0 0 22px;color:#505348}
.about-copy .about-lead{font-size:22px;line-height:1.5;color:var(--ink)}
.about-image{margin:54px 0 0;overflow:hidden}
.about-image img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover}
@media(min-width:701px) and (max-width:1000px){header nav{gap:20px;font-size:14px}}
@media(max-width:700px){.about-grid{grid-template-columns:1fr;gap:30px}.about h1{font-size:clamp(28px,7.5vw,48px)}.about-since{margin-top:20px}.about-copy .about-lead{font-size:20px}.about-copy p{font-size:16px}.about-image{margin-top:30px}}

.about h1{margin:0;font-family:"LEMON MILK",Arial,sans-serif;font-weight:500;letter-spacing:-.02em}
.about-image img{max-height:none;object-fit:contain}
header nav a[aria-current="page"]{color:#8a682e}

/* Keep LEMON MILK's connected cedilla instead of its Turkish comma substitution. */
.hero h1,h2,.statement-title,.contact-title,.about h1{font-feature-settings:"locl" 0}

/* Selected work: the six original homepage visuals. */
.selected-work h2{font-size:clamp(32px,4.2vw,66px);line-height:1.24;margin-bottom:48px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.work-card{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:1;background:#eeeee7}
.work-card img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.work-card:hover img{transform:scale(1.025)}}
@media(min-width:701px) and (max-width:1000px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:700px){.selected-work h2{font-size:clamp(28px,7.5vw,48px);margin-bottom:30px}.work-grid{grid-template-columns:1fr;gap:20px}}

/* The supplied mountain composition and a shared centerline for tagline / Explore. */
.hero-art--mountain{aspect-ratio:1.64;background:#073043}
.hero-art--mountain img{object-position:center center}
.hero-bottom{align-items:center}

/* Desktop: reduce the previous overall composition by 15%.
   The hero title is 20% smaller than its previous size, without double scaling. */
@media(min-width:701px){
  body{width:min(100%,max(850px,68%));max-width:1360px;margin-inline:auto}
  header{height:86px}
  .wordmark .brand-logo{width:148px}
  footer .wordmark .brand-logo{width:123px}
  header nav{gap:34px;font-size:13px}
  .contact-link{padding:8.5px 0}
  .contact-link span{margin-left:21px}
  .hero{padding-top:25px}
  .hero h1{font-size:clamp(40.96px,5.952vw,94.72px);margin-top:29px;margin-bottom:14px}
  .hero-bottom{margin-bottom:36px;gap:21px}
  .hero-bottom p{font-size:15.3px}
  .round-link{gap:17px;font-size:12px}
  .round-link b{width:51px;height:51px;font-size:20.4px}
  .section-pad{padding-top:68px;padding-bottom:68px}
  .section-label{margin-bottom:46px}
  .eyebrow,.section-label{font-size:11px;letter-spacing:.94px}
  h2{font-size:clamp(21.76px,2.788vw,44.88px)}
  .intro-copy{padding-top:8.5px;max-width:408px}
  .intro-copy p{font-size:17px;margin-bottom:21px}
  .intro-copy p+p{font-size:14.5px}
  .text-link{max-width:191px;margin-top:32px;padding-bottom:11px;font-size:13px}
  .expertise-heading{gap:25.5px;margin-bottom:48px}
  .expertise-heading p{font-size:14.5px}
  .services{--service-number-width:15.3px}
  .services .service-trigger{padding:26.35px 0}
  .services .service-title{font-size:clamp(16.32px,1.904vw,29.24px)}
  .services .number{font-size:11px}
  .services .plus{font-size:27.2px}
  .services .service-body{max-width:570px;margin-top:-15.3px;margin-bottom:29px}
  .services .service-body p{font-size:14.5px}
  .brands{padding-top:44px;padding-bottom:30px}
  .brands-heading{gap:17px;margin-bottom:20px}
  .brands-heading h2{font-size:11px}
  .brand-item{width:170px;height:85px}
  .brand-item svg{max-width:116px;max-height:48px}
  .statement{padding-top:58px;padding-bottom:26px}
  .statement-title,.contact-title{font-size:clamp(24.48px,4.284vw,66.64px)}
  .statement-title{margin:37px 0 65px}
  .statement-foot{padding-top:22px;gap:17px;font-size:10.5px;letter-spacing:.85px}
  .contact{padding-bottom:54px}
  .contact-title{padding-right:60px}
  .contact-title>span{font-size:61.2px}
  .contact-bottom{margin-top:41px;font-size:14.5px}
  .about h1,.selected-work h2{font-size:clamp(21.76px,2.856vw,44.88px)}
  .selected-work h2{margin-bottom:32px}
  .work-grid{gap:20px}
  .about-since{margin-top:27px;font-size:11px;letter-spacing:1.28px}
  .about-copy p{font-size:14.5px;margin-bottom:19px}
  .about-copy .about-lead{font-size:18.7px}
  .about-image{margin-top:37px}
  footer{padding:34px 0;gap:17px;font-size:11px}
}
@media(min-width:701px) and (max-width:1250px){header nav{gap:17px}}
@media(min-width:701px) and (max-width:900px){
  header nav{gap:12px;font-size:12px}
  .contact-link span{margin-left:10px}
  header .wordmark .brand-logo{width:130px}
}
@media(max-width:700px){
  .hero h1{font-size:clamp(35.2px,8.96vw,62.4px)}
  .hero-bottom{flex-wrap:nowrap;gap:12px}
  .hero-bottom p{font-size:14px;flex:1;min-width:0}
  .hero-bottom .round-link{flex-shrink:0}
  .hero-art--mountain{aspect-ratio:1.5}
}

/* Final refinements: header identity only, plus the two closing headlines. */
header .wordmark .brand-logo{width:170.2px}
.services .service.is-open .plus{transform:rotate(45deg)}
.services .service:not(.is-open) .plus{transform:rotate(0)}
.services .plus{transition:transform .55s cubic-bezier(.4,0,.2,1)}
@media(min-width:701px){
  .statement-title,.contact-title{font-size:clamp(19.584px,3.4272vw,53.312px)}
  .contact-title>span{font-size:48.96px}
}
@media(min-width:701px) and (max-width:900px){
  header .wordmark .brand-logo{width:149.5px}
}
@media(max-width:700px){
  header .wordmark .brand-logo{width:166.75px}
  .statement-title{font-size:clamp(19.2px,5.6vw,36.8px)}
  .contact-title{font-size:clamp(20.8px,5.52vw,38.4px)}
  .contact-title>span{font-size:28.8px}
}

/* Content tracks and row spacing move together, without measuring heights or
   toggling display at the end. Interrupted transitions reverse from their position. */
.services{
  --service-row-padding:31px;
  --service-content-overlap:18px;
  --service-content-bottom:34px;
  --service-duration:550ms;
  --service-easing:cubic-bezier(.4,0,.2,1);
  overflow-anchor:none;
}
.services .service-heading{margin:0}
.services .service-title{line-height:1.3}
.services .service-trigger{
  width:100%;border:0;background:transparent;color:inherit;text-align:left;
  font-family:Arial,Helvetica,sans-serif;font-weight:400;line-height:normal;
  padding-block:var(--service-row-padding);
  transition:padding-bottom var(--service-duration) var(--service-easing);
}
.services .service.is-open .service-trigger{
  padding-bottom:calc(var(--service-row-padding) - var(--service-content-overlap));
}
.services .service-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--service-duration) var(--service-easing);
}
.services .service.is-open .service-panel{grid-template-rows:1fr}
.services .service-panel-clip{min-height:0;overflow:hidden}
.services .service-body{
  margin-top:0;margin-bottom:0;padding-bottom:var(--service-content-bottom);
}
.services .plus{transition:transform var(--service-duration) var(--service-easing)}
@media(min-width:701px){
  .services{--service-row-padding:26.35px;--service-content-overlap:15.3px;--service-content-bottom:29px}
}
@media(max-width:700px){
  .services{--service-row-padding:26px}
}

/* Text fades on the same timeline as the disclosure height. */
.services .service-body{opacity:0;transition:opacity var(--service-duration) var(--service-easing)}
.services .service.is-open .service-body{opacity:1}

/* Shared mobile navigation: reversible height, text and icon transitions. */
.mobile-menu{display:none}
.menu-toggle span{display:inline-block;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.menu-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.mobile-menu-links a[aria-current="page"]{color:#8a682e}
@media(min-width:1001px){header nav{gap:clamp(14px,1.4vw,28px)}}
@media(max-width:1000px){
  header nav{display:none}
  .menu-toggle{display:flex;align-items:center;gap:16px;border:0;background:none;color:inherit;font-size:14px;padding:12px 0;cursor:pointer}
  .menu-toggle span{font-size:24px}
  .mobile-menu{
    display:grid;grid-template-rows:0fr;gap:0;padding:0;border:0;
    align-items:stretch;pointer-events:none;
    transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1);
  }
  .mobile-menu.is-open{grid-template-rows:1fr;pointer-events:auto}
  .mobile-menu-clip{min-height:0;overflow:hidden}
  .mobile-menu-links{
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    padding:24px 5% 28px;border-bottom:1px solid var(--line);
    font-size:15px;line-height:1.5;opacity:0;
    transition:opacity .55s cubic-bezier(.4,0,.2,1);
  }
  .mobile-menu.is-open .mobile-menu-links{opacity:1}
}

/* Offerings: the existing cream, gold and editorial type system. */
.offering-hero,.offering{display:grid;grid-template-columns:40px minmax(0,.85fr) minmax(0,1.15fr);gap:28px}
.offering-hero{align-items:start}
.offering-hero h1{grid-column:1/3;margin:0;font-size:clamp(29px,3.4vw,53px);line-height:1.25;font-feature-settings:"locl" 0}
.offering-hero>p{grid-column:3;margin:0;font-size:17px;line-height:1.75;color:#505348}
.offering-list{padding:0 5% 68px}
.offering{padding:40px 0;border-top:1px solid var(--line)}
.offering-number{font-family:'LEMON MILK',Arial,sans-serif;font-size:18px;line-height:1.5;color:var(--gold)}
.offering h2{font-family:'Panton',Arial,sans-serif;font-weight:800;font-size:clamp(23px,1.95vw,28px);line-height:1.25;letter-spacing:-.01em}
.offering-copy p{margin:0 0 20px;font-size:14.5px;line-height:1.75;color:#505348}
.offering-copy ul{margin:0;padding-left:17px;font-size:14px;line-height:1.65}
.offering-copy li{padding-left:3px;margin-bottom:8px}
.offering-copy li:last-child{margin-bottom:0}
.offering-copy li::marker{color:var(--ink)}
@media(max-width:700px){
  .offering-hero{grid-template-columns:1fr;gap:28px}
  .offering-hero h1,.offering-hero>p{grid-column:1/-1}
  .offering-hero h1{font-size:clamp(30px,8.5vw,46px)}
  .offering-hero>p{font-size:16px;line-height:1.7}
  .offering-list{padding-bottom:36px}
  .offering{grid-template-columns:27px minmax(0,1fr);gap:16px 18px;padding:30px 0}
  .offering-number{font-size:16px}
  .offering h2{font-size:24px}
  .offering-copy{grid-column:1/-1}
  .offering-copy p,.offering-copy ul{font-size:16px}
}

/* Give the six navigation items room while preserving the content scale. */
body>header{width:min(90vw,1260px);margin:0;position:relative;left:50%;transform:translateX(-50%);gap:30px}
header .wordmark{flex-shrink:0}
header nav{white-space:nowrap}
@media(min-width:1001px){header nav{gap:clamp(13px,1.4vw,24px)}}

/* Reference wall with original-color brand assets. */
.references-intro{text-align:center;padding-bottom:44px}
.references-intro .section-label{justify-content:center;margin-bottom:30px}
.references-intro h1{margin:0;font-size:clamp(28px,3.2vw,48px);line-height:1.3;font-feature-settings:"locl" 0}
.references-intro p{margin:24px 0 0;font-size:16px;line-height:1.6;color:#61645a}
.reference-gallery{position:relative;padding:0 5% 68px}
.reference-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.reference-logo{min-width:0;height:150px;display:flex;align-items:center;justify-content:center;padding:22px 12px;border-bottom:1px solid var(--line)}
.reference-logo svg{display:block;width:calc(var(--mark-width)*1.12);max-width:100%;max-height:64px;overflow:visible}
@media(min-width:701px) and (max-width:1100px){.reference-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
  .references-intro{padding-top:54px;padding-bottom:34px}
  .references-intro h1{font-size:clamp(22px,6.1vw,38px)}
  .references-intro .section-label{margin-bottom:26px}
  .references-intro p{font-size:14px;margin-top:20px}
  .reference-gallery{padding-bottom:40px}
  .reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reference-logo{height:135px;padding:22px 16px}
  .reference-logo svg{max-height:58px}
}

/* Shared 24px corners for the requested image and color surfaces. */
.hero-art,.expertise,.statement,.about-image{border-radius:24px}

/* Keep the existing desktop glyph; use a vector on mobile to avoid iOS emoji. */
.mobile-link-arrow{display:none}
.contact-link .arrow-icon,.contact-link .arrow-glyph{margin-left:0}
@media(max-width:1000px){
  .arrow-glyph{display:none}
  .mobile-link-arrow{
    display:inline-block;width:1em;height:1em;vertical-align:-.12em;
    fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
}

/* Mobile spacing and rounded panels follow the hero image's 90% width. */
@media(max-width:700px){
  .hero{padding-top:28px}
  .hero h1{margin-top:0;margin-bottom:0}
  .hero-bottom{margin-bottom:18px}
  .brands-heading{margin-bottom:4px}
  .brand-item{height:72px}
  .expertise,.statement{width:90%;margin-inline:auto;padding-inline:clamp(16px,4vw,24px)}
  .statement{padding-top:28px;padding-bottom:28px}
  .statement-foot{gap:12px}
  .contact-bottom{margin-top:18px}
  .contact-bottom p{margin-top:0}
}

/* Preserve source colors and blend white logo backgrounds into the page. */
.reference-logo svg{overflow:hidden;mix-blend-mode:multiply}