/* Shared art direction: Georgia, quiet surfaces, a twelve-column editorial grid. */
:root {
  /* Official brand colors. Derived surfaces keep the photography visually dominant. */
  --brand-dark:#2F331D; --brand-secondary:#8E9E7B; --brand-light:#F2F3F7;
  --paper:var(--brand-light); --ink:var(--brand-dark); --accent:var(--brand-secondary);
  --muted:#565949; --line:#cfd5cc; --control-border:#687355;
  --surface:#e2e5e3; --hero-surface:#dadfd9; --portrait-surface:#e6e9e8;
  --experience-surface:#eaeced; --surface-two:#dee3de; --surface-three:#e8ebe9;
  --action:var(--brand-dark); --action-hover:#3d432b; --on-action:var(--brand-light);
  --footer-surface:var(--brand-dark); --on-footer:var(--brand-light); --on-footer-muted:#ccd3c8;
  --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif;
  --gutter:clamp(24px,5vw,88px); --column-gap:clamp(20px,2.4vw,40px);
  --section-space:clamp(88px,9.5vw,152px); --header-height:96px; --content-width:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 24px);scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.75 var(--sans)}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit;cursor:pointer;border:0}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
h1,h2,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:1.1}
h2{font-size:clamp(2.75rem,4.2vw,4.25rem);text-wrap:balance}
em{font-weight:400}
small{font-size:.8125rem}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
[tabindex="-1"]:focus{outline:none}
.hero,.section,footer,.experience-inner{width:100%;max-width:var(--content-width);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-space)}
.eyebrow{font-size:.75rem;line-height:1.6;letter-spacing:.13em;font-weight:400}
.provisional{display:block;color:var(--muted);font-size:.75rem;line-height:1.6;margin-top:14px}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:44px;padding:8px 0;font-size:.875rem;line-height:1.5;border-bottom:1px solid var(--control-border);transition:border-color .2s}
.text-link:hover{border-color:var(--ink)}
.text-link span{font-size:1.25rem}

/* Quiet, persistent navigation. */
.header{min-height:var(--header-height);padding:18px max(var(--gutter),calc((100vw - var(--content-width)) / 2 + var(--gutter)));display:flex;align-items:center;justify-content:space-between;gap:32px;position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px;line-height:1}
.brand-logo{display:block;width:216px;height:auto;aspect-ratio:843/232}
.header nav{display:flex;align-items:center;gap:clamp(20px,2.5vw,36px);font-size:.875rem}
.header nav>a{position:relative;padding-block:10px;min-height:44px}
.header nav>a::after{content:'';position:absolute;bottom:7px;left:0;width:0;height:1px;background:currentColor;transition:width .2s}
.header nav>a:hover::after,.header nav>a[aria-current]::after{width:100%}
.header nav .nav-contact{margin-left:8px;padding:8px 18px;border:1px solid var(--control-border)}
.nav-contact span{margin-left:24px}
.header nav .nav-contact::after{display:none}
.header nav .nav-contact:hover{border-color:var(--ink)}
.menu-toggle{display:none}
.skip-link{position:fixed;top:10px;left:10px;padding:12px;background:var(--action);color:var(--on-action);z-index:100;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* Opening image and the signature phrase. */
.hero{padding-top:clamp(32px,4vw,64px)}
.hero-title{display:flex;align-items:baseline;justify-content:space-between;gap:32px;margin-bottom:32px}
.hero-title h1{width:clamp(300px,36vw,450px);line-height:1}
.hero-logo{display:block;width:100%;height:auto;aspect-ratio:843/232}
.placeholder{display:block;position:relative;overflow:hidden;background:var(--surface)}
.hero-image{width:100%;aspect-ratio:2.15;background:var(--hero-surface)}
.placeholder-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:var(--muted)}
.placeholder-center>span:not(.gallery-number){font:italic clamp(1.5rem,2.2vw,2.25rem)/1.3 var(--serif);letter-spacing:-.03em}
.placeholder-center small{font-size:.75rem;line-height:1.6;letter-spacing:.1em}
.image-label{position:absolute;left:24px;bottom:20px;color:var(--muted);font-size:.75rem;letter-spacing:.08em}
.hero-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);align-items:center;padding-top:40px}
.hero-bottom>div{grid-column:2/8}
.hero-phrase{font:clamp(2.5rem,4vw,4rem)/1.12 var(--serif);letter-spacing:-.04em}
.hero-phrase em{display:inline-block;margin-left:.9em}
.hero-bottom .provisional{margin-top:18px}
.hero-bottom>.text-link{grid-column:10/-1;justify-self:end;white-space:nowrap}

/* Portrait and prose occupy distinct, aligned columns. */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--column-gap);align-items:center}
.portrait{grid-column:2/6;aspect-ratio:3/4;background:var(--portrait-surface)}
.portrait .placeholder-center{color:var(--muted)}
.about-copy{grid-column:8/-1;max-width:38ch}
.about-copy h2,.experience h2,.contact h2{margin-top:24px;margin-bottom:24px}
.about-copy p:not(.eyebrow):not(.provisional),.experience-copy>p:not(.eyebrow):not(.provisional){margin-top:18px;color:var(--muted)}
.about-copy .text-link{margin-top:26px}

/* Three stories, three image scales; captions share the image edge. */
.portfolio{position:relative;padding-top:64px}
.portfolio::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
.section-heading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);align-items:end;margin-bottom:56px}
.section-heading>div{grid-column:1/8}
.section-heading h2{margin-top:20px}
.section-note{grid-column:10/-1;justify-self:end;font-size:.875rem;line-height:1.7;padding-bottom:6px}
.section-note span{color:var(--muted)}
.portfolio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:88px var(--column-gap);align-items:start}
.portfolio-card{display:block;background:none;padding:0;text-align:left;min-width:0}
.portfolio-card:nth-child(1){grid-column:1/8}
.portfolio-card:nth-child(2){grid-column:9/-1;margin-top:144px}
.portfolio-card:nth-child(3){grid-column:3/11}
.portfolio-image{width:100%;aspect-ratio:4/3;transition:filter .25s}
.portfolio-card:nth-child(2) .portfolio-image{aspect-ratio:3/4}
.portfolio-card:nth-child(3) .portfolio-image{aspect-ratio:16/10}
.tone-one{background:var(--surface)}
.tone-two{background:var(--surface-two)}
.tone-three{background:var(--surface-three)}
.gallery-number{color:var(--control-border);font:3rem/1 var(--serif);letter-spacing:-.05em}
.tone-two .gallery-number{color:var(--control-border)}
.tone-three .gallery-number{color:var(--control-border)}
.portfolio-card:hover .portfolio-image{filter:brightness(.97)}
.card-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px}
.card-caption>span:first-child{min-width:0}
.card-caption strong{display:block;font:1.65rem/1.3 var(--serif);letter-spacing:-.035em}
.card-caption small{display:block;margin-top:5px;color:var(--muted);font-size:.75rem}
.round-arrow{display:grid;place-items:center;width:44px;min-width:44px;height:44px;font-size:1.35rem;transition:transform .2s}
.portfolio-card:hover .round-arrow{transform:translate(2px,-2px)}

/* A quieter typographic interval between portfolio and contact. */
.experience{background:var(--experience-surface)}
.experience-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);align-items:center;padding-block:100px}
.experience-copy{grid-column:2/7;max-width:41ch}
.experience h2{font-size:clamp(2.75rem,3.8vw,3.75rem)}
.experience-copy .text-link{margin-top:28px}
.testimonial{grid-column:9/-1;padding:0;max-width:30ch}
.testimonial .eyebrow{color:var(--muted)}
.testimonial-copy{margin-top:24px;font:1.9rem/1.25 var(--serif);letter-spacing:-.035em}
.short-rule{width:32px;height:1px;background:var(--accent);margin:28px 0}
.testimonial>p:not(.eyebrow):not(.testimonial-copy){color:var(--muted);font-size:1rem}
.testimonial .provisional{margin-top:20px}

/* Contact follows the same grid and keeps a single clear WhatsApp action. */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);align-items:start}
.contact-copy{grid-column:1/6}
.contact h2{font-size:clamp(2.5rem,3.6vw,3.5rem)}
.contact-copy>p:not(.eyebrow){max-width:34ch;color:var(--muted)}
.socials{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:40px}
.socials>div>span{display:block;font-size:.875rem}
.socials a{display:block}
.socials a>span{display:block;font-size:.875rem}
.socials span span{display:none}
.socials small{display:block;margin-top:4px;color:var(--muted);font-size:.75rem}
.contact-actions{grid-column:7/-1;align-self:end;min-width:0}
.contact-actions .socials{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.submit-button{min-height:52px;padding:14px 22px;font-size:.875rem;background:var(--action);color:var(--on-action);transition:background .2s}
.submit-button:hover{background:var(--action-hover)}
.submit-button span{margin-left:30px}
.contact-whatsapp{display:flex;align-items:center;justify-content:space-between;width:100%}
footer{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-block:40px}
footer::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
footer{max-width:none;padding-inline:max(var(--gutter),calc((100vw - var(--content-width)) / 2 + var(--gutter)));background:var(--footer-surface);color:var(--on-footer)}
footer::before{display:none}
footer .brand-logo{width:216px}
footer a:focus-visible{outline-color:var(--on-footer)}
footer p{font-size:.75rem;line-height:1.7}
footer p span{color:var(--on-footer-muted)}
footer .text-link{border:0}
footer .text-link span{color:var(--accent)}

/* Native dialog keeps keyboard focus and Escape support. */
dialog{width:min(1120px,94vw);max-height:90vh;max-height:90dvh;overflow:auto;padding:0 48px 40px;border:0;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgb(47 51 29 / 70%)}
.dialog-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:32px 24px;background:var(--paper);border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:2.75rem;margin-top:10px}
.close-dialog{min-height:44px;padding:8px;background:none;font-size:.875rem;white-space:nowrap}
.close-dialog span{font-size:1.4rem;margin-left:12px}
.dialog-note{margin-block:24px 32px;color:var(--muted);font-size:.875rem}
.gallery-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gallery-layout>.placeholder{aspect-ratio:3/4}
.gallery-layout>.gallery-large{grid-column:1/-1;aspect-ratio:16/10}
.gallery-contact{margin-top:32px}

@media(max-width:1100px){
  .header{gap:20px}
  .header nav{gap:20px}
  .header nav .nav-contact{margin-left:0;padding-inline:12px}
  .nav-contact span{margin-left:12px}
  .hero-title .eyebrow{max-width:150px}
  .hero-bottom>div{grid-column:1/8}
  .hero-bottom>.text-link{grid-column:9/-1}
  .portrait{grid-column:1/6}
  .about-copy{grid-column:7/-1}
  .section-note{grid-column:9/-1}
  .portfolio-card:nth-child(2){margin-top:104px}
  .portfolio-grid{row-gap:64px}
  .card-caption{gap:8px}
  .card-caption strong{font-size:1.5rem}
  .experience-copy{grid-column:1/7}
  .testimonial{grid-column:8/-1}
  .experience-inner{padding-block:80px}
  .desktop-break{display:none}
}
@media(max-width:840px){
  :root{--header-height:84px;--gutter:24px}
  .header{padding-block:14px}
  .brand-logo{width:200px}
  .menu-toggle{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0 10px 12px;background:none;font-size:.875rem}
  .menu-icon{width:20px;height:10px;border-top:1px solid;border-bottom:1px solid}
  .menu-toggle[aria-expanded=true] .menu-icon{height:1px;border-bottom:0}
  .header nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--header-height));overflow:auto;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 24px;background:var(--paper);border-bottom:1px solid var(--line)}
  .header nav.is-open{display:flex}
  .header nav>a{padding:12px 0;font-size:1rem}
  .header nav>a::after{display:none}
  .header nav>a[aria-current]{text-decoration:underline;text-underline-offset:6px}
  .header nav .nav-contact{padding:12px 0;border:0}
}
@media(max-width:640px){
  :root{--section-space:80px;--column-gap:20px}
  html{scroll-padding-top:calc(var(--header-height) + 20px)}
  h2{font-size:clamp(2.6rem,9vw,3.4rem)}
  .hero{padding-top:30px}
  .hero-title{display:block;margin-bottom:26px}
  .hero-title .eyebrow{max-width:none;letter-spacing:.09em;margin-bottom:18px}
  .hero-title h1{width:100%;max-width:450px}
  .hero-image{aspect-ratio:4/5}
  .placeholder-center{gap:12px;padding:20px}
  .hero-image .placeholder-center>span{font-size:1.65rem;max-width:12ch}
  .placeholder-center small{letter-spacing:.045em}
  .image-label{left:16px;bottom:16px;font-size:.75rem;letter-spacing:.015em}
  .hero-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding-top:30px}
  .hero-phrase{font-size:clamp(2.6rem,9vw,3.5rem);line-height:1.12}
  .hero-phrase em{margin-left:.6em}
  .hero-bottom .provisional{margin-top:14px}
  .hero-bottom>.text-link{align-self:flex-end;white-space:normal}
  .about{display:flex;flex-direction:column;align-items:stretch;gap:36px}
  .portrait{width:82%;max-width:380px;align-self:flex-end;aspect-ratio:3/4}
  .about-copy{max-width:38ch}
  .about-copy h2,.experience h2,.contact h2{margin-top:18px;margin-bottom:22px}
  .about-copy .text-link{margin-top:22px}
  .portfolio{padding-top:40px}
  .section-heading{display:block;margin-bottom:32px}
  .section-heading h2{margin-top:16px}
  .section-note{margin-top:20px;padding:0}
  .portfolio-grid{display:flex;flex-direction:column;gap:44px}
  .portfolio-card:nth-child(n){width:100%;margin:0}
  .portfolio-card:nth-child(2){width:86%;align-self:flex-end}
  .portfolio-card:nth-child(3) .portfolio-image{aspect-ratio:4/3}
  .card-caption{padding-top:14px}
  .card-caption strong{font-size:1.6rem}
  .card-caption small{margin-top:4px}
  .gallery-number{font-size:2.5rem}
  .experience-inner{display:flex;flex-direction:column;align-items:stretch;gap:44px;padding-block:64px}
  .experience h2{font-size:clamp(2.6rem,8.8vw,3.4rem)}
  .experience-copy{max-width:40ch}
  .experience-copy .text-link{margin-top:24px}
  .testimonial{max-width:none;border-top:1px solid var(--line);padding-top:32px}
  .testimonial-copy{margin-top:18px;font-size:1.85rem}
  .short-rule{display:none}
  .testimonial>p:not(.eyebrow):not(.testimonial-copy){max-width:35ch;margin-top:20px}
  .contact{display:flex;flex-direction:column;gap:40px}
  .contact h2{font-size:clamp(2.35rem,8.3vw,3.3rem)}
  .contact-copy{width:100%}
  .contact-actions{width:100%}
  .contact-actions .socials{margin-top:28px}
  .submit-button{display:flex;align-items:center;justify-content:space-between;width:100%}
  footer{display:grid;grid-template-columns:1fr auto;gap:28px 16px;padding-block:32px}
  footer .wordmark{grid-column:1/-1}
  footer .text-link{gap:12px;font-size:.875rem}
  dialog{width:100%;max-width:100%;max-height:100vh;max-height:100dvh;margin:auto 0 0;padding:0 24px 28px}
  .dialog-head{align-items:flex-start;gap:16px;padding-block:22px}
  .dialog-head h2{font-size:2rem}
  .dialog-head .eyebrow{font-size:.75rem;letter-spacing:.035em;max-width:24ch}
  .close-dialog{padding:0 2px}
  .close-dialog span{margin-left:4px}
  .dialog-note{margin-block:20px 24px}
  .gallery-layout{grid-template-columns:1fr;gap:16px}
  .gallery-layout>.placeholder{aspect-ratio:4/5}
  .gallery-layout>.gallery-large{aspect-ratio:4/3}
  .gallery-contact{margin-top:24px;gap:16px}
}
@media(max-width:360px){
  :root{--gutter:20px}
  .header{gap:12px}
  .header .brand-logo{width:180px}
  .menu-toggle{gap:8px;padding-left:6px}
  .menu-icon{width:16px}
  .hero-title h1{width:100%}
  .image-label{max-width:calc(100% - 32px);line-height:1.6}
  .portfolio-card:nth-child(2){width:92%}
  footer{grid-template-columns:1fr}
  footer .text-link{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* V4: image-led compositions. Native proportions everywhere except the mobile hero. */
.hero-image{aspect-ratio:3/2;overflow:hidden}
.hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.portrait{aspect-ratio:auto}
.portrait img,.portfolio-image img,.gallery-photo img{display:block;width:100%;height:auto}
.portfolio-card:nth-child(1){grid-column:1/6}
.portfolio-card:nth-child(2){grid-column:7/-1}
.portfolio-card:nth-child(3){grid-column:4/9}
.portfolio-card:nth-child(n) .portfolio-image{aspect-ratio:auto}
.gallery-layout{grid-template-columns:repeat(12,minmax(0,1fr));gap:64px 24px;align-items:start;padding-block:40px 12px}
.gallery-photo{margin:0;min-width:0}
.photo-wide{grid-column:1/-1}
.photo-lead{grid-column:3/11}
.photo-center{grid-column:4/10}
.photo-left{grid-column:1/6}
.photo-right{grid-column:8/13;margin-top:72px}
.photo-half-left{grid-column:1/7}
.photo-half-right{grid-column:7/13;margin-top:64px}
.photo-detail{grid-column:5/9}
@media(max-width:840px) and (min-width:641px){
  .gallery-layout{gap:40px 16px}
  .photo-center{grid-column:3/11}
  .photo-left{grid-column:1/7}
  .photo-right{grid-column:8/13;margin-top:40px}
  .photo-detail{grid-column:4/10}
}
@media(max-width:640px){
  .hero-image{aspect-ratio:4/5}
  .portfolio-card:nth-child(2){width:100%}
  .portfolio-card:nth-child(3){width:86%;align-self:flex-end}
  .gallery-layout{display:flex;flex-direction:column;gap:32px;padding-top:24px}
  .gallery-photo{width:100%;margin:0}
  .photo-left{width:88%;align-self:flex-start}
  .photo-right{width:88%;align-self:flex-end}
  .photo-detail{width:78%;align-self:center}
}

/* V5: real brand narrative, kept within the established editorial system. */
.hero-bottom{align-items:start}
.hero-support{max-width:39ch;margin-top:24px;color:var(--muted);font-size:.9375rem;line-height:1.75}
.about{align-items:start}
.portrait{margin-top:56px}
.about-copy{grid-column:7/-1;max-width:47ch}
.about-copy p:not(.eyebrow){margin-top:18px;color:var(--muted)}
.about-reflection{grid-column:2/12;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--column-gap);margin-top:clamp(88px,9vw,136px);padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--line)}
.about-reflection>div:first-child{grid-column:1/5}
.about-reflection h3,.process-list h3{margin:20px 0 0;font-family:var(--serif);font-weight:400;letter-spacing:-.035em}
.about-reflection h3{max-width:8ch;font-size:clamp(2.5rem,3.8vw,3.75rem);line-height:1.08}
.reflection-copy{grid-column:6/-1;max-width:48ch}
.reflection-copy>p{margin-top:18px;color:var(--muted)}
.reflection-copy>p:first-child{margin-top:0}
.reflection-copy blockquote{margin:48px 0 0;padding:0;font:italic clamp(2rem,3.2vw,3.25rem)/1.2 var(--serif);letter-spacing:-.04em;text-wrap:balance}
.reflection-copy .text-link{margin-top:36px}
.section-note{grid-column:9/-1;max-width:35ch;justify-self:end;color:var(--muted)}
.section-note span{color:var(--ink)}

.experience-inner{display:block;padding-block:clamp(96px,9vw,144px)}
.experience-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);align-items:start}
.experience-intro>div:first-child{grid-column:1/7}
.experience-intro h2{max-width:11ch;margin:24px 0 0;font-size:clamp(3rem,4.8vw,4.75rem)}
.experience-lead{grid-column:8/-1;max-width:45ch;padding-top:38px}
.experience-lead p{margin-top:18px;color:var(--muted)}
.experience-lead p:first-child{margin-top:0}
.experience-lead strong{display:block;margin-top:28px;font:italic 1.7rem/1.35 var(--serif);font-weight:400;letter-spacing:-.025em}
.process-list{list-style:none;margin:clamp(80px,8vw,128px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.process-list li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);padding:40px 0;border-top:1px solid var(--line)}
.process-list li>span{grid-column:1/2;color:var(--muted);font-size:.75rem;letter-spacing:.13em}
.process-list li>div{grid-column:3/11;display:grid;grid-template-columns:4fr 5fr;gap:var(--column-gap);align-items:start}
.process-list h3{margin:0;font-size:clamp(1.65rem,2.2vw,2.25rem);line-height:1.2}
.process-list li>div>p,.process-list li>div>strong{grid-column:2;margin:0;color:var(--muted)}
.process-list li>div>p+ p{margin-top:14px}
.process-list li>div>strong{display:block;margin:12px 0;font:italic 1.35rem/1.4 var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.02em}

.testimonial-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);align-items:center}
.testimonial-image{grid-column:1/6}
.testimonial-image img{display:block;width:100%;height:auto}
.testimonial-content{grid-column:7/12;max-width:49ch}
.testimonial-content h2{margin-top:20px;max-width:9ch}
.testimonial-content blockquote{margin:44px 0 28px;padding:0;font:italic clamp(2rem,3.1vw,3rem)/1.2 var(--serif);letter-spacing:-.04em;text-wrap:balance}
.testimonial-content>p:not(.eyebrow):not(.testimonial-signature){color:var(--muted)}
.testimonial-signature{margin-top:24px;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase}
.audio-player{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 20px;width:100%;margin-top:44px;padding:18px 0;border-top:1px solid var(--control-border);border-bottom:1px solid var(--control-border)}
.audio-player audio{display:none}
.audio-toggle{display:flex;align-items:center;gap:14px;min-width:0;padding:0;background:none;text-align:left;font-size:.875rem}
.audio-icon{display:grid;place-items:center;width:34px;min-width:34px;height:34px;border:1px solid var(--control-border);border-radius:50%;font-size:.625rem;padding-left:2px}
.audio-player.is-playing .audio-icon{padding-left:0;font-size:.7rem}
.audio-time{color:var(--muted);font-size:.6875rem;letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
.audio-progress{grid-column:1/-1;width:100%;min-height:20px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;border:0;outline:0}
.audio-progress::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--ink) 0 var(--audio-progress,0%),var(--control-border) var(--audio-progress,0%) 100%)}
.audio-progress::-moz-range-track{height:1px;background:var(--control-border)}
.audio-progress::-moz-range-progress{height:1px;background:var(--ink)}
.audio-progress::-webkit-slider-thumb{width:10px;height:10px;margin-top:-4.5px;appearance:none;-webkit-appearance:none;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.audio-progress::-moz-range-thumb{width:10px;height:10px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.audio-progress:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.positioning{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--column-gap);padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.positioning>div:first-child{grid-column:1/6}
.positioning h2{max-width:11ch;margin-top:20px;font-size:clamp(2.5rem,3.8vw,3.75rem)}
.positioning>div:last-child{grid-column:7/12;max-width:47ch;padding-top:35px}
.positioning>div:last-child p{margin-top:18px;color:var(--muted)}
.positioning>div:last-child p:first-child{margin-top:0}
.positioning>div:last-child strong{display:block;margin-top:32px;font:italic 1.65rem/1.4 var(--serif);font-weight:400;letter-spacing:-.025em}

.contact-copy>p:not(.eyebrow){margin-top:18px}
.contact-copy>p:not(.eyebrow):first-of-type{margin-top:0}
.contact-location{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.contact-location strong{display:block;font:1.25rem/1.35 var(--serif);font-weight:400;letter-spacing:-.02em}
.contact-location p{max-width:40ch;margin-top:10px;color:var(--muted);font-size:.8125rem;line-height:1.7}

@media(max-width:1100px){
  .about-copy{grid-column:6/-1}
  .about-reflection{grid-column:1/-1}
  .experience-intro>div:first-child{grid-column:1/7}
  .experience-lead{grid-column:7/-1}
  .process-list li>div{grid-column:2/13}
  .testimonial-content{grid-column:7/-1}
  .positioning>div:last-child{grid-column:7/-1}
}

@media(max-width:640px){
  .hero-support{margin-top:20px;font-size:.875rem}
  .hero-support br{display:none}
  .hero-bottom>.text-link{align-self:flex-start}
  .portrait{margin-top:0}
  .about-copy{max-width:none}
  .about-reflection{display:block;margin-top:68px;padding-top:48px}
  .about-reflection h3{font-size:clamp(2.5rem,10vw,3.2rem)}
  .reflection-copy{margin-top:40px;max-width:none}
  .reflection-copy blockquote{margin-top:36px;font-size:clamp(2rem,8.5vw,2.75rem)}
  .section-note{max-width:38ch}
  .experience-inner{padding-block:80px}
  .experience-intro{display:block}
  .experience-intro h2{font-size:clamp(2.7rem,10.5vw,3.7rem)}
  .experience-lead{max-width:none;padding-top:40px}
  .process-list{margin-top:64px}
  .process-list li{grid-template-columns:40px 1fr;gap:20px;padding:32px 0}
  .process-list li>span{grid-column:1}
  .process-list li>div{grid-column:2;display:block}
  .process-list h3{font-size:1.55rem}
  .process-list li>div>p{margin-top:20px}
  .process-list li>div>p+ p{margin-top:12px}
  .process-list li>div>strong{margin:18px 0 0;font-size:1.3rem}
  .testimonial-section{display:flex;flex-direction:column;align-items:stretch;gap:48px}
  .testimonial-image{width:84%;align-self:flex-start}
  .testimonial-content{max-width:none}
  .testimonial-content h2{max-width:10ch}
  .testimonial-content blockquote{margin-top:36px;font-size:clamp(2rem,8.5vw,2.75rem)}
  .audio-player{margin-top:36px;gap:12px 14px}
  .audio-toggle{font-size:.875rem}
  .positioning{display:block;padding-top:64px;padding-bottom:64px}
  .positioning>div:last-child{max-width:none;padding-top:40px}
  .positioning h2{font-size:clamp(2.5rem,9vw,3.3rem)}
  .contact-copy>p:not(.eyebrow):first-of-type{margin-top:0}
}

/* Mobile art direction: every primary photograph shares the content gutter as one editorial axis. */
@media(max-width:640px){
  dialog{padding-inline:var(--gutter)}
  .portrait,.testimonial-image{width:100%;max-width:none;align-self:stretch}
  .portfolio-card:nth-child(n){width:100%;align-self:stretch}
  .gallery-photo{width:100%;align-self:stretch}
}