*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0}
:root{
--sage:#849377; --sage-lo:#73826A; --sage-hi:#94A288; --sage-d:#5F6D55;
--sage-mist:#EAEEE4;
--terra:#C4714B; --terra-d:#A85D3B; --terra-text:#9C5433;
--head:#33382E; --body:#63665C; --body-l:#7C8076;
--sand:#F4EFE6; --sand-2:#EBE4D6; --white:#fff;
--hd:76px;
/* distance from a centred .wrap content edge out to the viewport edge */
--bleed:max(24px, (100vw - 1200px)/2 + 24px);
}
body{background:var(--white); color:var(--body);
font-family:'Nunito Sans',-apple-system,sans-serif; font-size:17px; line-height:1.72;
-webkit-font-smoothing:antialiased; overflow-x:clip}
h1,h2,h3,h4{font-family:Lora,Georgia,serif; font-weight:600; color:var(--head);
letter-spacing:.2px; margin:0; text-wrap:balance}
h1{font-size:39px; line-height:1.28}
h2{font-size:31px; line-height:1.34}
h3{font-size:20px; line-height:1.4}
p{margin:0}
a{text-decoration:none; color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px}
.lede{font-size:17.5px}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--terra); color:#fff;
font-weight:700; font-size:15.5px; padding:15px 30px; border-radius:3px;
transition:background .22s}
.btn:hover{background:var(--terra-d)}
.btn svg{transition:transform .28s cubic-bezier(.3,.7,.4,1)}
.btn:hover svg{transform:translateX(4px)}
.btn.light{background:#fff; color:var(--terra)}
.btn.light:hover{background:var(--sand)}
/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:60; background:var(--sand);
transition:background .3s, box-shadow .3s}
.hd-in{display:flex; align-items:center; gap:30px; height:var(--hd); transition:height .3s}
.hd.small{background:rgba(255,255,255,.97); box-shadow:0 1px 14px rgba(51,56,46,.09)}
.hd.small .hd-in{height:62px}
.logo{margin-right:auto; display:flex; align-items:center; gap:11px}
.logo img{width:40px; height:40px; flex:0 0 auto; transition:width .3s, height .3s}
.hd.small .logo img{width:34px; height:34px}
.logo b{font-family:Lora; font-weight:600; font-size:23px; color:var(--head)}
.logo span{font-size:13px; font-weight:600; color:var(--body-l)}
.nav{display:flex; gap:26px}
.nav a{font-size:16px; font-weight:600; color:#54584d; transition:color .2s}
.nav a:hover{color:var(--terra-text)}
/* below the nav breakpoint the five pages were only reachable from the footer.
A plain disclosure panel, no overlay, no slide-in theatre. */
.menu-btn{display:none; width:40px; height:40px; padding:0; border:0; background:none;
cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px}
.menu-btn span{display:block; width:19px; height:1.5px; background:var(--head);
transition:transform .25s, opacity .2s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--terra-text); outline-offset:2px; border-radius:3px}
.menu{background:var(--sand); overflow:hidden}
.hd.small .menu{background:rgba(255,255,255,.97)}
.menu[hidden]{display:none}
.menu-in{padding:6px 24px 22px}
.menu nav{display:grid}
.menu nav a{padding:13px 0; font-size:17px; font-weight:600; color:#54584d;
background:linear-gradient(to right, rgba(132,147,119,.28), rgba(132,147,119,.28)) bottom/100% 1px no-repeat}
.menu nav a.on{color:var(--head)}
.menu nav a:last-child{background:none}
.menu-note{padding-top:16px; font-size:14px; line-height:1.5; color:var(--body-l); max-width:34ch}
/* language: recedes to a single quiet control */
.lang{position:relative}
.lang>button{background:none; border:0; cursor:pointer; font-family:inherit;
font-size:13.5px; font-weight:600; color:var(--body-l); padding:6px 4px;
display:flex; align-items:center; gap:5px; transition:color .2s}
.lang>button:hover{color:var(--head)}
.lang>button svg{opacity:.7}
.lang ul{position:absolute; right:0; top:calc(100% + 6px); margin:0; padding:6px 0;
list-style:none; background:#fff; border-radius:3px; min-width:172px;
box-shadow:0 8px 26px rgba(51,56,46,.16); opacity:0; visibility:hidden;
transform:translateY(-3px); transition:opacity .18s, transform .18s, visibility .18s}
.lang:hover ul,.lang:focus-within ul{opacity:1; visibility:visible; transform:none}
.lang li a,.lang li span{display:block; padding:7px 16px; font-size:14.5px; color:var(--body)}
.lang li a:hover{background:var(--sand); color:var(--head)}
.lang li span{color:var(--body-l); cursor:default}
.lang li .cur{color:var(--head); font-weight:700}
.lang .lang-note{margin:6px 12px 2px; padding-top:8px; max-width:20ch; font-size:12.5px;
line-height:1.45; color:var(--body-l);
background:linear-gradient(to right, rgba(132,147,119,.34), rgba(132,147,119,.34)) top/100% 1px no-repeat}
/* ---------- hero ---------- */
.hero{background:var(--sand); position:relative}
.hero-in{display:grid; grid-template-columns:53% 47%; align-items:center; min-height:668px}
.hero-copy{padding:76px 62px 84px 0}
.kicker{font-size:15.5px; font-weight:700; color:var(--terra-text); margin-bottom:12px}
.hero .kicker{margin-bottom:13px}
.hero h1{margin-bottom:19px; max-width:17ch}
.hero .ask{font-weight:600; font-size:20.5px; line-height:1.55; color:var(--head);
margin-bottom:20px; max-width:38ch}
.hero .lede{margin-bottom:28px; max-width:44ch}
.trust{display:flex; align-items:center; gap:13px; margin-top:26px}
.trust img{width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 22%}
.trust div{font-size:15px; line-height:1.55; color:var(--body-l)}
.trust b{display:block; color:var(--head); font-weight:700}
/* sage field: gradient depth, photo seated inside it */
.hero-art{position:relative; align-self:stretch; display:flex; align-items:flex-end}
.hero-art::before{content:""; position:absolute; top:0; bottom:0; left:0; right:-50vw;
background:linear-gradient(163deg, var(--sage-hi) 0%, var(--sage) 46%, var(--sage-lo) 100%)}
.hero-art::after{content:""; position:absolute; top:0; bottom:0; left:0; width:120px;
background:linear-gradient(90deg, rgba(60,70,52,.10), rgba(60,70,52,0))}
.hero-art .tall{position:relative; z-index:2; margin:0 0 0 58px; width:calc(100% - 58px);
height:calc(100% - 58px); object-fit:cover; object-position:50% 12%;
box-shadow:0 18px 44px rgba(45,54,38,.2)}
/* ---------- who this is for ---------- */
.forwho{background:var(--sage-mist); padding:96px 0 100px}
.forwho-in{display:grid; grid-template-columns:1.06fr .94fr; gap:60px; align-items:center}
.forwho figure{margin:0; position:relative}
.forwho figure img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:44% 34%;
border-radius:3px; box-shadow:0 20px 46px rgba(45,54,38,.17)}
.forwho h2{margin-bottom:16px}
.forwho p{margin-bottom:14px}
.forwho .lead{margin-bottom:15px}
.forwho ul{list-style:none; margin:0 0 17px; padding:0; display:grid; gap:11px}
.forwho li{position:relative; padding-left:25px; line-height:1.6}
.forwho li::before{content:""; position:absolute; left:1px; top:11px; width:7px; height:7px;
border-radius:50%; background:var(--sage)}
.forwho .close{font-weight:700; color:var(--head)}
.forwho .btn{margin-top:12px}
/* ---------- hi, i'm giulia ---------- */
.meet{padding:100px 0 104px}
.meet-in{display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center}
.collage{position:relative; padding:26px 0 62px 26px}
.collage .field{position:absolute; left:0; top:0; width:74%; height:78%;
background:var(--sand-2); border-radius:3px}
.collage .a{position:relative; width:88%; margin-left:auto; border-radius:3px; object-fit:cover;
box-shadow:0 20px 46px rgba(51,56,46,.2)}
.collage .b{position:absolute; left:0; bottom:0; width:47%; border-radius:3px; object-fit:cover;
box-shadow:0 16px 34px rgba(51,56,46,.24)}
.meet h2{margin-bottom:15px}
.meet p{margin-bottom:15px}
/* credibility: one bound moment, not three loose pieces */
.cred{margin:28px 0 26px; background:var(--sand); border-radius:3px; padding:24px 28px;
display:flex; align-items:stretch; gap:0; flex-wrap:wrap}
.cred div{padding:2px 18px; flex:1 1 0; min-width:118px;
background:linear-gradient(to right, rgba(132,147,119,.3), rgba(132,147,119,.3)) left/1px 100% no-repeat}
.cred div:first-child{padding-left:0; background:none}
.cred div:last-child{flex:1.3 1 0}
.cred b{display:block; font-family:Lora; font-weight:600; font-size:26px; color:var(--sage-d);
line-height:1.1; margin-bottom:3px; white-space:nowrap}
.cred span{font-size:14px; line-height:1.42; color:var(--body-l); display:block}
/* ---------- method: three moments, photographic, no blocks ---------- */
.method{padding:92px 0 96px; background:var(--white)}
.method-head{max-width:640px; margin-bottom:52px}
.method-head h2{margin-bottom:13px}
.method-head p{font-size:17.5px}
.method-head .sig{margin-top:14px; font-family:Lora; font-weight:500; font-size:19px;
line-height:1.5; color:var(--head)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; align-items:start}
.step{display:block}
.step:nth-child(2){margin-top:46px}
.step:nth-child(3){margin-top:18px}
.step img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px;
box-shadow:0 16px 38px rgba(51,56,46,.16)}
.step h3{font-size:23px; color:var(--sage-d); margin:22px 0 7px}
.step p{font-size:16.5px; line-height:1.66}
/* ---------- how we work: photo band with an overlapping card ---------- */
.how{position:relative; background:var(--white); padding-bottom:96px}
.how-band{position:relative; aspect-ratio:3/1; overflow:hidden}
.how-band img{width:100%; height:100%; object-fit:cover; object-position:52% 10%}
.how-card{position:relative; z-index:4; margin-top:-124px; background:var(--sand);
border-radius:3px; padding:44px 48px 46px; max-width:660px;
box-shadow:0 22px 54px rgba(51,56,46,.18)}
.how-card h2{margin-bottom:14px}
.how-card p{margin-bottom:14px}
.how-card .when{font-family:Lora; font-weight:600; color:var(--head)}
.how-card .btn{margin-top:12px}
/* ---------- her own words, sitting inside her story ---------- */
.pause{background:var(--sand); padding:74px 0 78px}
.pause-in{max-width:760px}
.pause p{font-family:Lora; font-weight:500; font-size:23px; line-height:1.56;
color:var(--head); margin-bottom:18px}
.pause p.after{font-family:'Nunito Sans'; font-weight:400; font-size:17.5px;
line-height:1.7; color:var(--body); margin-bottom:0}
.pause .who{margin-top:20px; font-size:15px; color:var(--body-l)}
/* ---------- closing ---------- */
.cta{position:relative; min-height:452px; display:flex; align-items:center; background:var(--sage-d)}
.cta>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:90% 0}
.cta::after{content:""; position:absolute; inset:0;
background:linear-gradient(92deg, rgba(44,52,38,.95) 0%, rgba(46,54,40,.9) 34%,
rgba(49,57,42,.72) 56%, rgba(52,60,44,.46) 76%, rgba(55,63,47,.28) 100%)}
.cta-in{position:relative; z-index:3; width:100%; padding-top:74px; padding-bottom:78px}
.cta h2{color:#fff; margin-bottom:13px; max-width:17ch}
.cta p{color:rgba(255,255,255,.9); max-width:44ch; margin-bottom:26px}
.cta .sig{margin-top:24px; font-family:Lora; font-weight:500; font-size:18px;
color:rgba(255,255,255,.92)}
/* ---------- footer ---------- */
.ft{background:var(--head); color:rgba(255,255,255,.7); padding:56px 0 26px; font-size:15.5px}
.ft-in{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px}
.ft b.name{font-family:Lora; font-weight:600; font-size:22px; color:#fff; display:block;
margin-bottom:4px}
.ft .role{display:block; font-size:14px; color:rgba(255,255,255,.55); margin-bottom:12px}
.ft h4{color:#fff; font-size:16px; font-weight:700; margin-bottom:12px}
.ft a{display:block; padding:5px 0; color:rgba(255,255,255,.72); transition:color .2s}
.ft a:hover{color:var(--terra-text)}
.ft-base{margin-top:36px; padding-top:18px; display:flex; justify-content:space-between;
gap:16px; flex-wrap:wrap; font-size:14px; color:rgba(255,255,255,.5);
background:linear-gradient(to right, rgba(255,255,255,.14), rgba(255,255,255,.14)) top/100% 1px no-repeat}
.ft-legal{display:flex; flex-wrap:wrap; gap:4px 16px; margin-left:auto}
.ft-legal a{display:inline; padding:0; font-size:14px; color:rgba(255,255,255,.5)}
.ft-legal a:hover{color:var(--terra-text)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
}
@media(max-width:1000px){
.nav{display:none}
h1{font-size:31px} h2{font-size:26px}
.hero .ask{font-size:18.5px; margin-bottom:16px}
.hero-in{grid-template-columns:1fr; min-height:0}
.hero-copy{padding:54px 0 36px}
.hero-art{min-height:auto; display:block}
.hero-art::before{left:-24px; right:-24px; top:56px; bottom:0}
.hero-art::after{display:none}
.hero-art .tall{margin:0 0 0 24px; width:calc(100% - 24px); height:auto; aspect-ratio:4/5}
.forwho{padding:66px 0 70px}
.forwho-in,.meet-in{grid-template-columns:1fr; gap:38px}
.steps{grid-template-columns:1fr; gap:34px}
.step:nth-child(2),.step:nth-child(3){margin-top:0}
.step img{aspect-ratio:4/3}
.method-head{margin-bottom:34px}
.pause{padding:56px 0 60px}
.pause p{font-size:20px}
.meet{padding:66px 0 70px}
.method{padding:64px 0 68px}
.collage{padding:20px 0 48px 20px}
.cred div{padding:10px 0; min-width:100%; background:none}
.cred div:not(:first-child){background:linear-gradient(to right,rgba(132,147,119,.3),rgba(132,147,119,.3)) top/100% 1px no-repeat}
.how-band{aspect-ratio:16/10}
.how-card{margin-top:-70px; padding:32px 26px 34px}
.how{padding-bottom:66px}
.pause{padding:56px 0 60px}
.ft-in{grid-template-columns:1fr; gap:26px}
.hd-in{gap:14px}
.menu-btn{display:flex}
.lang{display:none}
.logo b{font-size:18px; white-space:nowrap}
.logo img{width:34px; height:34px}
.hd-in .btn{padding:11px 14px; font-size:13.5px; white-space:nowrap; flex:0 0 auto}
}
@media(max-width:370px){
.logo b{display:none}
.hd-in .btn{padding:11px 17px; font-size:14px; white-space:nowrap}
.btn{padding:13px 22px; font-size:14.5px}
}
/* ---------- hero accents -----------------------------------------------------
One accent per hero, chosen by what the sentence is doing, not from a set of
shapes. They share the palette and the restraint; the gesture differs:
Home a drawn terracotta line under the promise, drawn once on arrival.
Change is the offer, so it is the only hero that moves.
About the sentence changes colour at the hinge. Ink, then deep sage
across the thing she actually did, then ink again.
Coaching the destination steps forward onto its own indented line.
Movement carried by position; the page's motion is spent on the
process panel further down.
FAQ nothing. On a clarity page the accent should be doing a job, and
it already is, on the category control.
Contact no mark at all. The invitation is signed, using the same
signature device as the homepage voice section and the About close.
---------------------------------------------------------------------------- */
.mk{position:relative; white-space:nowrap}
.mk>svg{position:absolute; left:0; right:0; bottom:-.19em; width:100%; height:.3em;
color:var(--terra); overflow:visible; pointer-events:none}
@keyframes mkdraw{to{clip-path:inset(-40% -3% -40% 0)}}
@media(prefers-reduced-motion:no-preference){
.mk-draw>svg{clip-path:inset(-40% 100% -40% 0);
animation:mkdraw .95s cubic-bezier(.22,.61,.36,1) .5s forwards}
}
/* about: the turn, said in colour */
.hi-turn{color:var(--terra-text)}
/* contact: signed, the way the rest of her voice is signed */
.ct-sign{display:block}
/* ---------- shared inline link, used on the inner pages ---------- */
.ct-link{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:16px;
color:var(--terra-text); padding-bottom:2px;
background:linear-gradient(to right, var(--terra-text), var(--terra-text)) bottom/100% 1.5px no-repeat;
transition:color .2s}
.ct-link:hover{color:var(--terra-d)}
.ct-link svg{transition:transform .28s cubic-bezier(.3,.7,.4,1)}
.ct-link:hover svg{transform:translateX(4px)}
.ct-link.inline{display:inline; font-size:inherit; gap:0}
/* ================= ABOUT PAGE ================= */
.ab-open{background:var(--sand); padding:76px 0 84px}
.ab-open-in{display:grid; grid-template-columns:.85fr 1.15fr; gap:58px; align-items:center;
position:relative}
/* THE PIVOT. One idea in three parts:
1. the right edge of the portrait is dissolved into the page by a sand-coloured
overlay, so there is no rectangle left for the line to be drawn on top of
2. the dashed arc is born inside that fade, bows out into the open gap and returns
to the lower faded edge
3. the arc and the pivot dot are one SVG in one coordinate system, and both are
computed in script from the measured position of the word "switch", so the two
meet at the same point at every width instead of being matched by eye.
Decorative only: no grid track, no height, no flow. See src/partials/script.html. */
.ab-arc{position:absolute; z-index:1; inset:0; pointer-events:none;
opacity:0; transition:opacity .3s linear}
.ab-arc.ready{opacity:1}
.ab-arc svg{width:100%; height:100%; display:block; overflow:visible}
.hi-turn{color:var(--terra-text)}
@media(prefers-reduced-motion:no-preference){
/* the arc runs downhill the whole way, so a top to bottom wipe reveals it in the
order it is drawn: out of the upper fade, round to the pivot, back into the lower
fade. The dot is faded in at --dot-delay, which script.html solves from the pivot's
own height so the dot lands exactly as the wipe reaches it. */
.ab-arc.ready .ab-arc-line{clip-path:inset(0 0 100% 0);
animation:abarc 2.2s cubic-bezier(.36,.62,.42,1) .45s forwards}
.ab-arc.ready .ab-arc-dot{opacity:0; transform-box:fill-box; transform-origin:center;
transform:scale(.45);
animation:abpivot .5s cubic-bezier(.22,.61,.36,1) var(--dot-delay,1.5s) forwards}
}
@keyframes abarc{to{clip-path:inset(0 0 -3% 0)}}
@keyframes abpivot{to{opacity:1; transform:none}}
.ab-open figure{margin:0; position:relative; z-index:0}
.ab-open figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
border-radius:3px}
/* the fade is painted in the page's own sand rather than masked out of the image, so
the far edge resolves to exactly the hero background and the rectangle disappears.
It stays near transparent across the first third of its width, which keeps it off
her face and body and lets it do its work only at the edge. */
.ab-photo::after{content:""; position:absolute; z-index:1; top:0; right:0; bottom:0;
width:38%; pointer-events:none; border-radius:0 3px 3px 0;
/* Stops are written in the band's own coordinates; the comments give the position
across the whole photograph, which is how the progression was judged. It stays
almost nothing until well past her shoulder and does its work in the last third,
so the picture recedes rather than being washed. */
background:linear-gradient(to right,
rgba(244,239,230,0) 0%, /* 62% of the photo */
rgba(244,239,230,.07) 21%, /* 70% very light */
rgba(244,239,230,.23) 42%, /* 78% soft */
rgba(244,239,230,.50) 63%, /* 86% medium */
rgba(244,239,230,.84) 79%, /* 92% strong */
rgba(244,239,230,.96) 87%, /* 95% */
var(--sand) 92%, var(--sand) 100%)} /* settled by 97%, so no edge survives */
.ab-open h1{margin-bottom:15px; max-width:19ch}
.ab-open p{margin-bottom:14px}
/* the sentence that ends the corporate half of the story gets its own surface rather
than a bigger font. The page steps one shade darker here, and again at the switch. */
.ab-paper{background:var(--sand-2); padding:74px 0 78px}
.ab-paper p{font-family:Lora,Georgia,serif; font-weight:500; font-size:29px; line-height:1.42;
color:var(--head); max-width:22ch}
/* THE SWITCH. Two fields meet on a hard seam: the career she had above it, the reason and
what it led to below it, in the deep sage the rest of the brand reserves for weight.
Her portrait is the only element present in both, so the photograph itself is what
crosses over. No timeline, no milestones, no numbering. */
.ab-turn{position:relative; overflow:hidden}
.ab-turn-top{background:var(--sand-2); padding:96px 0 74px}
.ab-turn-bottom{background:var(--sage-d); padding:78px 0 96px}
.ab-turn-grid{display:grid; grid-template-columns:min(36vw,430px) 1fr; gap:66px}
.ab-turn-a h2{margin-bottom:16px; max-width:16ch}
.ab-turn-a p{font-size:18px}
.ab-turn-b .pivot{font-family:Lora,Georgia,serif; font-weight:500; font-size:25px;
line-height:1.46; color:var(--sand); margin-bottom:20px; max-width:30ch}
.ab-turn-b p{color:rgba(255,255,255,.86); font-size:17.5px; max-width:52ch}
.ab-turn-photo{position:absolute; z-index:3; margin:0; top:50%; transform:translateY(-50%);
left:max(24px, calc(50% - 600px + 24px)); width:min(36vw,430px)}
.ab-turn-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 16%;
border-radius:3px; box-shadow:0 26px 60px rgba(30,38,26,.4)}
.ab-story{padding:92px 0 96px}
.ab-story-in{display:grid; grid-template-columns:1.18fr .82fr; gap:64px; align-items:center}
.ab-story h2{margin-bottom:16px; max-width:20ch}
.ab-story p{margin-bottom:15px; max-width:56ch}
.ab-story figure{margin:0}
.ab-story figure img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 26%;
border-radius:3px; box-shadow:0 20px 44px rgba(51,56,46,.18)}
/* flex, not block: the separators are painted by ::after with no whitespace between the
spans in the markup, so without flex items the whole line is one unbreakable run and
forces the grid column that wide on narrow screens. Flex gives each language its own
wrap opportunity regardless. */
.ab-tags{margin-top:24px; font-family:Lora,Georgia,serif; font-weight:600; font-size:22px;
line-height:1.5; color:var(--sage-d); display:flex; flex-wrap:wrap; row-gap:4px}
.ab-tags span:not(:last-child)::after{content:"ยท"; margin:0 6px 0 9px; opacity:.55}
.ab-close{background:var(--sage-mist); padding:80px 0 86px}
.ab-close-in{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center}
.ab-close-copy{min-width:0}
.ab-close h2{margin-bottom:13px; max-width:22ch}
.ab-close p{max-width:52ch; margin-bottom:14px}
.ab-close .ab-sig{font-family:Lora,Georgia,serif; font-weight:500; font-size:20px;
line-height:1.5; color:var(--head)}
.ab-close .who{display:block; margin-top:22px; font-family:Lora,Georgia,serif; font-weight:500;
font-size:18px; color:var(--body-l)}
.ab-close-act{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
@media(max-width:1000px){
.ab-open{padding:52px 0 58px}
.ab-open-in,.ab-story-in,.ab-close-in{grid-template-columns:1fr; gap:36px}
.ab-paper{padding:52px 0 56px}
.ab-paper p{font-size:23px; max-width:none}
.ab-arc{display:none}
.ab-photo::after{display:none}
.ab-open figure img{box-shadow:0 20px 46px rgba(51,56,46,.2)}
.co-rule{margin-bottom:18px}
.ab-turn{overflow:visible}
.ab-turn-top{padding:52px 0 34px}
.ab-turn-bottom{padding:38px 0 60px}
.ab-turn-grid{grid-template-columns:1fr; gap:0}
.ab-turn-photo{position:static; transform:none; width:min(320px,72%); margin:30px 0 0}
.ab-turn-b .pivot{font-size:21px; max-width:none}
.ab-story{padding:60px 0 64px}
.ab-story figure img{max-width:300px}
.ab-tags{font-size:19px}
.ab-close{padding:56px 0 62px}
}
/* ================= COACHING PAGE ================= */
.co-open{background:var(--sand); padding:78px 0 86px; position:relative; overflow:hidden}
/* min-height holds the hero at the height the photograph used to give it, now that the
photograph no longer takes a row: without it the section would lose 160px. */
.co-open-in{display:grid; grid-template-columns:.7fr .3fr; gap:56px; align-items:center;
position:relative; min-height:589px}
.co-copy{position:relative; z-index:3}
.co-open h1{margin-bottom:20px; max-width:21ch}
.co-open .ask{font-weight:600; font-size:20.5px; line-height:1.55; color:var(--head);
margin-bottom:18px; max-width:40ch}
.co-open p{margin-bottom:14px; max-width:52ch}
/* THE TRANSITION. Three layers, one composition, read left to right: the sage field runs
behind the whole right side, the photograph sits on it at full hero height, and the
cream shape is painted back over both. So the picture is cut by the same wave that ends
the copy area, and the sage is left as a band between them rather than a panel.
Everything is anchored to the content grid, never the viewport, so the wave, the path
and the photograph's edge keep their distances from each other at every width. */
.co-field{position:absolute; z-index:0; top:-78px; bottom:-86px; left:28%;
right:calc(-1 * var(--bleed)); background:var(--sage)}
.co-open figure{margin:0; position:relative; z-index:1; align-self:stretch}
.co-open figure img{position:absolute; top:-78px; left:0; max-width:none;
width:calc(100% + var(--bleed)); height:calc(100% + 164px); object-fit:cover;
object-position:28% 14%}
.co-track-art{position:absolute; z-index:2; top:-78px; bottom:-86px; left:26%; right:0;
pointer-events:none}
.co-track-art svg{width:100%; height:100%; display:block}
/* the cream is the page's own sand, so where it crosses the section background there is
no seam and only the cut through the photograph reads. The path is drawn before it, so
the top of the path passes behind the wave rather than stopping against it, and the
fade has it dissolving before it gets there. */
.co-track-art .crm{fill:var(--sand)}
.co-track-art .ln-fade stop{stop-color:var(--sand)}
.co-track-art .ln-fade .s0{stop-opacity:0}
.co-track-art .ln-fade .s1{stop-opacity:.95}
/* terracotta reads as itself on the field only with the light ring around it */
.co-track-art .nd{fill:var(--terra); stroke:var(--sand); stroke-width:2.5;
vector-effect:non-scaling-stroke}
.co-node-label{position:absolute; font-size:11px; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--sand); white-space:nowrap; transform:translateY(-50%)}
.co-lab2{left:calc(51.1% + 17px); top:43.8%}
.co-lab1{left:calc(38.7% + 17px); top:75.2%}
@media(prefers-reduced-motion:no-preference){
/* drawn once, upward: awareness first, then action, each node arriving after the line
has passed it */
.co-track-art .ln{stroke-dasharray:600; stroke-dashoffset:600;
animation:codraw 2.2s cubic-bezier(.33,.68,.4,1) .3s forwards}
.co-track-art .nd,.co-node-label{opacity:0; animation:nodein .6s ease forwards}
.co-track-art .nd1,.co-lab1{animation-delay:1.05s}
.co-track-art .nd2,.co-lab2{animation-delay:1.75s}
}
@keyframes codraw{to{stroke-dashoffset:0}}
@keyframes nodein{to{opacity:1}}
.co-rule{display:block; width:56px; height:2px; background:var(--terra); margin:0 0 22px;
border-radius:2px}
/* THE PROCESS. One continuous panel: the photograph and the method mark hold still on the
left while the three questions move past them, so the stages read as one piece of work
rather than three stacked blocks. The mark is the method itself, drawn: the whole
situation, then the one move, then that move with structure around it. */
.co-process{background:var(--white); padding:96px 0 34px}
.co-process-head{margin-bottom:60px}
.co-process-head>*{max-width:60ch}
.co-process-head h2{margin-bottom:14px; max-width:24ch}
.co-process-head p{font-size:17.5px}
.co-track{display:grid; grid-template-columns:.86fr 1.14fr; gap:72px; align-items:start}
.co-media{position:sticky; top:calc(var(--hd) + 40px)}
.co-shots{position:relative; aspect-ratio:1/1; border-radius:3px; overflow:hidden;
box-shadow:0 22px 50px rgba(51,56,46,.2)}
.co-shots img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:50% 22%; opacity:0; transition:opacity .55s ease}
.co-track[data-stage="0"] .s0,
.co-track[data-stage="1"] .s1,
.co-track[data-stage="2"] .s2{opacity:1}
.co-mark{display:flex; align-items:center; gap:22px; margin-top:30px}
.pmk{width:132px; height:132px; flex:0 0 auto; overflow:visible}
.pmk circle{transition:opacity .5s ease, r .5s ease, fill .5s ease, stroke-width .5s ease}
.pmk .m-scatter circle{fill:var(--sage-d); stroke:var(--sage-d); stroke-width:0}
.pmk .m-ring{fill:none; stroke:var(--sage-d); stroke-width:2; opacity:0}
.pmk .m-one{fill:var(--terra); opacity:0; r:0}
/* mapping: everything that is true about the situation, unsorted and all of it solid */
.co-track[data-stage="0"] .m-scatter circle{opacity:.92}
/* focus: the field empties out to outlines and one move is taken */
.co-track[data-stage="1"] .m-scatter circle{opacity:.5; fill:none; stroke-width:1.5}
.co-track[data-stage="1"] .m-one{opacity:1; r:11}
/* action: the chosen move, with structure held around it */
.co-track[data-stage="2"] .m-scatter circle{opacity:.28; fill:none; stroke-width:1.5}
.co-track[data-stage="2"] .m-one{opacity:1; r:11}
.co-track[data-stage="2"] .m-ring{opacity:1}
.co-pillar{position:relative; display:block; min-width:8ch}
.co-pillar b{font-family:Lora,Georgia,serif; font-weight:600; font-size:25px;
color:var(--sage-d); position:absolute; left:0; top:50%; transform:translateY(-50%);
opacity:0; transition:opacity .4s ease; white-space:nowrap}
.co-pillar b:first-child{position:relative; top:auto; transform:none}
.co-track[data-stage="0"] .p0,
.co-track[data-stage="1"] .p1,
.co-track[data-stage="2"] .p2{opacity:1}
.co-stages{display:grid; gap:0}
.co-stage{padding:8px 0 118px; max-width:56ch}
.co-stage:last-child{padding-bottom:120px}
.co-inline{display:none}
/* the pillar and its mark ride with each stage on small screens, where there is no
room to pin a panel beside the copy */
.co-tag{display:none; align-items:center; gap:16px; margin-bottom:16px}
.co-tag .pmk{width:72px; height:72px}
.co-tag b{font-family:Lora,Georgia,serif; font-weight:600; font-size:21px; color:var(--sage-d)}
.co-tag[data-stage="0"] .m-scatter circle{opacity:.92}
.co-tag[data-stage="1"] .m-scatter circle{opacity:.5; fill:none; stroke-width:1.5}
.co-tag[data-stage="1"] .m-one{opacity:1; r:11}
.co-tag[data-stage="2"] .m-scatter circle{opacity:.28; fill:none; stroke-width:1.5}
.co-tag[data-stage="2"] .m-one{opacity:1; r:11}
.co-tag[data-stage="2"] .m-ring{opacity:1}
.co-stage h3{font-size:29px; line-height:1.3; margin-bottom:14px}
.co-stage .co-lead{font-family:Lora,Georgia,serif; font-weight:500; font-size:21px;
line-height:1.5; color:var(--head); margin-bottom:15px}
.co-stage p{font-size:17px}
.co-stage .btn{margin-top:28px}
/* what it is like to be in a program: substance, not a facts strip on its own */
.co-rhythm{background:var(--sage-mist); padding:88px 0 94px}
.co-rhythm-in{display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:start}
.co-rhythm h2{margin-bottom:16px; max-width:20ch}
.co-rhythm-copy p{margin-bottom:15px; max-width:52ch}
.co-facts{background:var(--white); border-radius:3px; padding:8px 32px}
.co-facts div{display:grid; grid-template-columns:.38fr .62fr; gap:20px; padding:17px 0;
background:linear-gradient(to right, rgba(132,147,119,.28), rgba(132,147,119,.28)) bottom/100% 1px no-repeat}
.co-facts div:last-child{background:none}
.co-facts b{font-family:Lora,Georgia,serif; font-weight:600; font-size:17.5px; color:var(--head)}
.co-facts span{font-size:16.5px; line-height:1.6}
.cta.flip>img{object-position:12% 0}
.cta.flip::after{background:linear-gradient(268deg, rgba(44,52,38,.95) 0%, rgba(46,54,40,.9) 34%,
rgba(49,57,42,.72) 56%, rgba(52,60,44,.46) 76%, rgba(55,63,47,.28) 100%)}
.cta.flip .cta-in{display:flex; justify-content:flex-end}
.cta.flip .cta-box{width:min(520px,100%)}
.cta-alt{display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-weight:700;
font-size:15.5px; color:rgba(255,255,255,.9); padding-bottom:2px;
background:linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,.55)) bottom/100% 1.5px no-repeat;
transition:color .2s}
.cta-alt:hover{color:#fff}
.cta-alt svg{transition:transform .28s cubic-bezier(.3,.7,.4,1)}
.cta-alt:hover svg{transform:translateX(4px)}
/* below the full container width the band between the wave and the photograph is no
longer wide enough to hold a label, so the art simplifies: the field and the path move
right with the narrowing grid and the labels drop */
@media(max-width:1199px){
.co-node-label{display:none}
.co-track-art{left:36%}
.co-field{left:38%}
}
@media(max-width:1000px){
.co-open{padding:52px 0 58px}
.co-open-in,.co-rhythm-in{grid-template-columns:1fr; gap:36px}
.co-open-in{min-height:0}
.co-track-art,.co-field{display:none}
.co-open figure{align-self:auto}
.co-open figure img{position:static; width:100%; max-width:360px; height:auto;
aspect-ratio:4/5; object-position:46% 28%}
.co-process{padding:60px 0 66px}
.co-process-head{margin-bottom:34px}
.co-track{grid-template-columns:1fr; gap:0}
.co-media{display:none}
.co-tag{display:flex}
.co-inline{display:block; margin:0 0 22px}
.co-inline img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 22%;
border-radius:3px; box-shadow:0 16px 34px rgba(51,56,46,.18)}
.co-stage{padding:0 0 52px; max-width:none}
.co-stage h3{font-size:24px}
.co-stage .co-lead{font-size:19px}
.co-rhythm{padding:58px 0 64px}
.co-facts{padding:6px 22px}
.co-facts div{grid-template-columns:1fr; gap:2px; padding:14px 0}
.cta.flip .cta-in{justify-content:flex-start}
.cta.flip::after{background:linear-gradient(180deg, rgba(44,52,38,.74), rgba(44,52,38,.95))}
}
/* ================= FAQ PAGE ================= */
.fq-open{background:var(--sand); padding:70px 0 76px; overflow:hidden}
/* min-height holds the hero at a height that shows the portrait well, since most of
the composition below is absolutely positioned and would otherwise collapse to the
height of the copy column alone. */
.fq-open-in{position:relative; min-height:460px}
.fq-intro{position:relative; z-index:4}
.fq-intro>*{max-width:44ch}
.fq-open h1{margin-bottom:15px; max-width:16ch}
/* THE THREE FIELDS. One composition, not three cards: the portrait is the base layer,
full hero height, and the cream and sage fields are painted back over its left and
right sides with their own independent organic edges, leaving a window of the
photograph showing through the middle. Anchored to the content grid, never the
viewport, so the two edges and the photograph keep their distances from each other
at every width. Sage continues past the wrap to the page edge on a separate flat
layer, so the wavy field itself never has to stretch with the bleed. */
.fq-portrait{position:absolute; z-index:1; top:-70px; bottom:-76px; left:15%; right:12%;
margin:0; overflow:hidden}
.fq-portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 10%}
.fq-sage-bleed{position:absolute; z-index:2; top:-70px; bottom:-76px; right:calc(-1 * var(--bleed));
width:var(--bleed); background:var(--sage)}
.fq-fields{position:absolute; z-index:3; top:-70px; bottom:-76px; left:0; right:0;
pointer-events:none}
.fq-fields svg{width:100%; height:100%; display:block}
.fq-fields .sand{fill:var(--sand)}
.fq-fields .sage{fill:var(--sage)}
/* browse by topic: the category index lives in the hero, inside the sage field. It is
the tablist, so choosing a topic swaps the questions below without moving the page. */
.fq-topics{position:absolute; z-index:4; top:-70px; bottom:-76px; right:0; left:76%}
.fq-topics-in{position:relative; height:100%; display:flex; flex-direction:column;
justify-content:center; padding:26px 40px 26px 15%}
.fq-browse{font-family:Lora,Georgia,serif; font-weight:600; font-size:18px; color:var(--sand);
margin-bottom:20px}
.fq-tabs{display:grid}
.fq-tabs button{appearance:none; border:0; background:none; cursor:pointer; width:100%;
font-family:inherit; text-align:left; padding:15px 0; display:flex; align-items:center;
gap:14px; color:rgba(244,239,230,.74); transition:color .22s;
background:linear-gradient(to right, rgba(244,239,230,.26), rgba(244,239,230,.26)) bottom/100% 1px no-repeat}
.fq-tabs button:last-child{background:none}
.fq-tabs .n{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid;
place-items:center; font-size:12.5px; font-weight:700; letter-spacing:.04em;
border:1px solid rgba(244,239,230,.4); transition:background-color .22s, color .22s, border-color .22s}
.fq-tabs .t{font-size:15.5px; font-weight:600; line-height:1.3}
.fq-tabs button:hover{color:var(--sand)}
.fq-tabs button[aria-selected="true"]{color:var(--sand)}
.fq-tabs button[aria-selected="true"] .n{background:var(--sand); color:var(--sage-d);
border-color:var(--sand)}
.fq-tabs button:focus-visible{outline:2px solid var(--sand); outline-offset:3px; border-radius:3px}
@media(prefers-reduced-motion:no-preference){
.fq-topics{opacity:0; transform:translateY(10px);
animation:fqrise .8s cubic-bezier(.22,.61,.36,1) .25s forwards}
}
@keyframes fqrise{to{opacity:1; transform:none}}
.fq-body{padding:44px 0 88px}
.fq-panel{padding-top:6px; min-height:368px}
.fq-panel:focus{outline:none}
.fq-panel[hidden]{display:none}
.fq-panel.enter{animation:fqin .26s ease both}
@keyframes fqin{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.fq-gh{margin-bottom:22px}
.fq-list{display:grid; gap:10px; max-width:880px}
.qa{background:var(--sand); border-radius:3px; overflow:hidden; transition:background .25s}
.qa[open]{background:var(--sage-mist)}
.qa summary{list-style:none; cursor:pointer; padding:21px 26px; display:flex; gap:20px;
align-items:center; justify-content:space-between;
font-family:Lora,Georgia,serif; font-weight:600; font-size:19px; color:var(--head);
line-height:1.42}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:2px solid var(--terra-text); outline-offset:-3px}
.qa summary svg{flex:0 0 auto; color:var(--sage-d); transition:transform .28s cubic-bezier(.3,.7,.4,1)}
.qa[open] summary svg{transform:rotate(180deg)}
.qa .a{padding:0 26px 22px; max-width:70ch}
.qa .a p{margin-bottom:12px}
.qa .a p:last-child{margin-bottom:0}
.fq-close{background:var(--sage-mist); padding:84px 0 90px}
.fq-close-in{display:grid; grid-template-columns:.46fr 1fr; gap:60px; align-items:center}
.fq-close figure{margin:0}
.fq-close figure img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 18%;
border-radius:3px; box-shadow:0 20px 44px rgba(51,56,46,.18)}
.fq-close h2{margin-bottom:14px; max-width:22ch}
.fq-close p{margin-bottom:26px; max-width:50ch}
@media(max-width:1000px){
.fq-open{padding:48px 0 52px}
.fq-open-in{min-height:0}
.fq-intro>*{max-width:none}
.fq-portrait,.fq-sage-bleed,.fq-fields{display:none}
.fq-topics{position:static; margin-top:32px}
.fq-topics-in{padding:22px; background:var(--sage-d); border-radius:3px}
.fq-body{padding:30px 0 62px}
.fq-panel{min-height:0}
.fq-close figure{max-width:260px}
.qa summary{font-size:17.5px; padding:17px 20px; gap:14px}
.qa .a{padding:0 20px 19px}
.fq-close{padding:56px 0 62px}
.fq-close-in{grid-template-columns:1fr; gap:32px}
.fq-close figure img{max-width:240px}
}
/* ================= CONTACT PAGE ================= */
/* one composition: she is present at full height, and everything needed to say yes sits
beside her. Nothing else on the page competes with it. Calm and reduced: the hero
carries only the invitation, not every reassurance the page has to offer. */
.ct-invite{background:var(--sand); overflow:hidden; padding-bottom:74px}
.ct-invite-in{display:grid; grid-template-columns:44% 56%; align-items:stretch;
min-height:620px}
.ct-copy{padding:80px 56px 84px 0; max-width:520px; align-self:center; position:relative}
.ct-photo{margin:0 calc(-1 * var(--bleed)) 0 0; position:relative}
.ct-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:60% 10%}
/* the conversation: a faint ripple opening behind the headline, and a written aside
that arrives after it. Both decorative, neither in the flow. */
.ct-ripple{position:absolute; z-index:0; pointer-events:none;
left:clamp(120px, 46%, 260px); top:2%;
width:clamp(200px, 48%, 320px); height:auto; aspect-ratio:1; overflow:visible}
.ct-ripple circle{fill:none; stroke:var(--terra); stroke-width:1; opacity:.14;
vector-effect:non-scaling-stroke}
.ct-cue{position:absolute; z-index:2; pointer-events:none;
right:clamp(-30px, -4%, 0px); top:clamp(56px, 13%, 96px);
display:flex; flex-direction:column; gap:2px;
font-family:Caveat,'Segoe Script',cursive; font-size:clamp(19px, 1.8vw, 25px);
line-height:1.15; color:var(--terra); transform:rotate(-7deg); transform-origin:left top}
.ct-cue em{font-style:normal}
.ct-cue em:last-child{margin-left:1.6em}
.ct-copy>*:not(.ct-ripple):not(.ct-cue){position:relative; z-index:1}
.ct-sign{display:block; font-family:Caveat,'Segoe Script',cursive; font-size:29px;
color:var(--terra-text); margin:18px 0 26px; line-height:1}
@media(prefers-reduced-motion:no-preference){
.ct-ripple circle{opacity:0; transform-origin:150px 150px; transform:scale(.82);
animation:ripplein 1.1s cubic-bezier(.22,.61,.36,1) forwards}
.ct-ripple circle:nth-child(1){animation-delay:.35s}
.ct-ripple circle:nth-child(2){animation-delay:.5s}
.ct-ripple circle:nth-child(3){animation-delay:.65s}
.ct-ripple circle:nth-child(4){animation-delay:.8s}
.ct-cue{opacity:0; animation:cuein .75s ease 1.35s forwards}
}
@keyframes ripplein{to{opacity:.14; transform:none}}
@keyframes cuein{to{opacity:1}}
.ct-invite h1{margin-bottom:16px; max-width:16.5ch}
.ct-lead{margin-bottom:0; font-size:18.5px; max-width:40ch; font-family:Lora,Georgia,serif;
font-weight:500; line-height:1.5; color:var(--head)}
.ct-foot{padding-top:46px; max-width:1200px}
.ct-foot>*{max-width:74ch}
.ct-foot p{margin-bottom:16px}
.ct-alt{font-family:Lora,Georgia,serif; font-weight:500; font-size:19.5px; line-height:1.6;
color:var(--head)}
.ct-alt .ct-link{font-size:19.5px; margin-left:2px}
@media(max-width:1000px){
.ct-invite{padding-bottom:52px}
.ct-invite-in{grid-template-columns:1fr; min-height:0}
.ct-copy{padding:40px 0 10px; max-width:none}
.ct-photo{margin:0 -24px; position:relative; height:auto; aspect-ratio:16/11}
.ct-photo img{position:absolute; object-position:56% 12%}
.ct-ripple{left:auto; right:0; top:-2%; width:min(44%,200px)}
.ct-cue{display:none}
.ct-lead{font-size:17.5px}
.ct-foot{padding-top:34px}
.ct-alt,.ct-alt .ct-link{font-size:17.5px}
}
/* ================= LEGAL PAGES ================= */
/* small title area, then a plain readable document. No hero graphics, no cards: these
pages exist to be read, not to sell. */
.lg-open{background:var(--sand); padding:64px 0 52px}
.lg-open h1{margin-bottom:10px; max-width:24ch}
.lg-meta{font-size:15px; color:var(--body-l); max-width:60ch}
.lg-body{padding:56px 0 92px}
.lg-doc{max-width:720px}
.lg-doc h2{font-size:23px; margin:40px 0 14px}
.lg-doc h2:first-child{margin-top:0}
.lg-doc h3{font-size:18px; margin:22px 0 10px}
.lg-doc p{margin-bottom:14px}
.lg-doc ul{margin:0 0 14px; padding-left:22px; display:grid; gap:8px}
.lg-doc li{line-height:1.6}
.lg-doc a{color:var(--terra-text); text-decoration:underline; text-decoration-color:rgba(156,84,51,.35)}
.lg-doc a:hover{text-decoration-color:currentColor}
.lg-table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15.5px}
.lg-table th,.lg-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--sand-2)}
.lg-table th{font-family:Lora,Georgia,serif; font-weight:600; color:var(--head)}
.lg-foot{margin-top:40px; padding-top:20px; font-size:15px; color:var(--body-l);
background:linear-gradient(to right, rgba(132,147,119,.28), rgba(132,147,119,.28)) top/100% 1px no-repeat}
@media(max-width:1000px){
.lg-open{padding:44px 0 36px}
.lg-body{padding:36px 0 64px}
.lg-table{font-size:14.5px}
.lg-table th,.lg-table td{padding:8px}
}