:root{
--paper:#f6f7f9;--card:#eceef1;--card-2:#e7eaef;--beige:#e3e6ea;--line:#d3d7dd;
--ink:#1f2227;--ink-2:#4a505a;--ink-3:#7b828d;--ink-ph:#626976;--red:#d92211;--panel:#383c43;--accent:#7d838d;--accent-2:#619bb6;--on-dark:#e6e9ed;
--wide:1300px;--header-h:93px;--gutter:clamp(20px,4.6vw,72px);
--serif:'Newsreader',Georgia,'Times New Roman',serif;--sans:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;
--r-lg:16px;--r-md:14px;--r-sm:10px;--r-btn:12px;
--sh-soft:0 1px 2px rgb(23 27 33/.04),0 10px 28px rgb(23 27 33/.055);
--sh-chip:0 1px 2px rgb(23 27 33/.05),0 4px 12px rgb(23 27 33/.06);
--sh-lift:0 2px 4px rgb(23 27 33/.05),0 18px 40px rgb(23 27 33/.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button:disabled{cursor:default}
button,a,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
input:focus-visible,textarea:focus-visible{outline:none}
::selection{background:var(--ink);color:var(--on-dark)}
h1,h2,h3,p{margin:0}ul,ol{margin:0;padding:0}img{max-width:100%}
.wrap{width:min(calc(100% - var(--gutter)*2),var(--wide));margin-inline:auto}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.08}
.display em{font-style:normal;color:var(--accent-2)}
.lede{color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:14px 27px;border:0;border-radius:var(--r-btn);background:linear-gradient(180deg,#3f444d 0%,#23272e 100%);color:var(--on-dark);font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;box-shadow:var(--sh-chip);transition:background .22s,transform .22s,box-shadow .22s;text-align:center}
.btn svg{width:17px;height:17px;flex:0 0 17px}
.btn:hover{background:linear-gradient(180deg,#4c525c 0%,#2b2f37 100%);box-shadow:var(--sh-lift)}
.btn:active{transform:translateY(1px)}
.btn--light{background:var(--beige);color:var(--ink);box-shadow:none}
.btn--light:hover{background:#d9dde3;box-shadow:var(--sh-chip)}
.btn--onDark{background:var(--beige);color:var(--ink)}
.btn--light svg,.btn--onDark svg{color:var(--red)}
.btn--onDark:hover{background:#fff}
.btn--sm{min-height:44px;padding:11px 21px;font-size:14px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .2s,border-color .2s}
.tlink:hover{color:var(--accent);border-color:var(--accent)}
.tlink svg{width:14px;height:14px;flex:0 0 14px;color:var(--red)}
/* The two navigation cues carry an arrow, so they read as controls without
   the rule underneath; inline .tlink in prose keeps its underline. */
.back-top{border-bottom:0;padding-bottom:0}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-soft)}
.card--paper{background:var(--paper)}
.card--grad{background:linear-gradient(168deg,#eff1f4 0%,#e6e9ee 100%)}
.card--dark{background:var(--panel);color:var(--on-dark);box-shadow:var(--sh-lift)}
.card--dark .lede{color:#b9bfc9}
.icon-chip{width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-btn);background:var(--paper);box-shadow:var(--sh-chip);display:grid;place-items:center;color:var(--ink)}
.icon-chip svg{width:21px;height:21px}
.section-head{margin-bottom:clamp(44px,5vw,68px)}
.section-head h2{font-size:clamp(38px,5vw,74px)}
.section-head .lede{margin-top:20px;font-size:16px;max-width:52ch}
.ph{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:var(--r-md);background:linear-gradient(152deg,#eaedf1 0%,#dde1e7 100%);color:var(--ink-3)}
.ph::after{content:'';position:absolute;inset:13px;border:1px dashed rgb(23 27 33/.17);border-radius:10px;pointer-events:none}
.ph-tag{position:absolute;top:19px;left:21px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.ph-note{text-align:center;max-width:80%;font-size:12px;line-height:1.7;padding:8px}
.ph-note strong{display:block;font-family:var(--serif);font-size:17px;font-weight:400;color:var(--ink-2);margin-bottom:7px;letter-spacing:-.01em}
.ph-slot{position:absolute;left:21px;right:21px;bottom:18px;display:flex;justify-content:space-between;gap:14px;font-size:10px}
.ph--sm::after{inset:8px;border-radius:8px}
.ph--sm .ph-tag,.ph--sm .ph-slot{display:none}
.ph--sm .ph-note{font-size:10px;line-height:1.5;max-width:92%}
.fig{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}

.ph--sm .ph-note strong{font-size:12px;margin-bottom:3px}
html.anim [data-anim]{opacity:0}
.skip{position:fixed;left:16px;top:-100px;z-index:200;background:var(--ink);color:var(--on-dark);padding:13px 22px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.skip:focus{top:0}
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s}
.site-header.is-stuck{background:rgb(246 247 249/.9);backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 6px 20px rgb(23 27 33/.045)}
.header-inner{height:92px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{display:block;height:52px;width:auto}
.main-nav{display:flex;gap:6px;align-items:center;margin-left:auto}
.main-nav a{position:relative;padding:10px 15px;border-radius:var(--r-btn);font-size:14px;color:var(--ink-2);transition:background .2s,color .2s}
/* The hover takes the blue accent rather than a grey a shade under --beige:
   the nav sits on the hero's own tint, where any grey barely registered.
   White on #619bb6 measures 3.06:1, under the 4.5:1 a 14px label wants --
   asked for and kept deliberately. Darkening the hover to #3a7793 would put
   the same white at 4.95:1 if that ever matters. */
.main-nav a:hover{background:var(--accent-2);color:#fff}
.main-nav a[aria-current]{background:var(--beige);color:var(--ink)}
.main-nav a[aria-current]:hover{background:var(--accent-2);color:#fff}
.header-cta{margin-left:14px;flex-shrink:0}
.mobile-menu{display:none}
.hero{position:relative;overflow:hidden;margin-top:calc(-1*var(--header-h));padding-top:var(--header-h);background:linear-gradient(180deg,#eceef1 0%,var(--paper) 74%);border-bottom:1px solid var(--line)}
/* One rhythm unit for the whole first screen: every gap between the text
   blocks is this value, so the column cannot drift out of step the way a pile
   of per-element margins did. With the chip row gone the copy is the only
   child, so the slack is handled by centring it rather than by an auto margin
   -- and the two paddings are deliberately unequal, which lands the block a
   little above the true centre, where it reads better. Nothing in the hero may
   set its own vertical margin outside this system. */
.hero-inner{--gap:clamp(22px,4.8svh,76px);--gap-lift:clamp(12px,3svh,44px);--pad-top:clamp(20px,3.4svh,56px);--pad-bottom:clamp(52px,8svh,130px);display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));padding:var(--pad-top) 0 var(--pad-bottom)}
/* 780px is what the third H1 line needs at the 78px ceiling; the paragraph
   keeps a readable measure well inside that. */
.hero-copy{display:flex;flex-direction:column;gap:var(--gap);max-width:min(100%,780px)}
.hero-intro{max-width:620px}
/* Tracks the height available, not the width alone: 42px on a 600px viewport,
   the full 78px from roughly 900px up. The copy deck requires three lines,
   and 78px is the ceiling at which the third still holds on one line inside
   the measure above. Raising it means widening .hero-copy to match. */
.hero h1{font-size:min(clamp(42px,5.9vw,78px),clamp(42px,calc(12.2svh - 31px),78px));font-weight:600;letter-spacing:-.028em}
/* The only element in the hero allowed a vertical margin, and only through
   this token: the two points read as a block of their own, so they get
   --gap-lift on top of the column's --gap above and below. --gap itself
   is a little tighter than it was to pay for it, which also sharpens the
   contrast between this block and the lines around it. */
.hero-points{list-style:none;display:grid;gap:clamp(5px,1svh,10px);max-width:46ch;margin-block:var(--gap-lift)}
.hero-points li{position:relative;padding-left:29px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.hero-points li svg{position:absolute;left:0;top:3px;width:19px;height:19px;color:var(--red)}
.hero-intro{font-size:16px;line-height:1.5;color:var(--ink-2)}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-actions .btn{min-height:clamp(46px,7svh,52px)}
/* Width is tied to the copy column, not to the window: the layer has to reach
   roughly 345px into the 780px column for the fade to land under the text the
   way it does on a laptop. The container stops growing at --wide while the
   gutters do not, so a flat 980px cap let the photograph drift off the text --
   on a 2560px screen it started 170px to the right of the last line, with bare
   paper in between. 64% still rules up to 1536px, where the two formulas meet;
   above it 50%+215px holds that overlap at any width.
   Three masks, intersected: fade towards the copy on the left, off the chips
   row at the bottom, and out from under the header at the top, where the nav
   would otherwise sit on a dark part of the photograph.
   The mask stays on the container rather than on the image: the two boxes are
   the same size, so every percentage lands where it did, and anything laid
   over the picture later fades out with it. */
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:min(64%,calc(50% + 215px));pointer-events:none;
-webkit-mask-image:linear-gradient(to left,#000 52%,rgb(0 0 0/0) 96%),linear-gradient(to top,rgb(0 0 0/0) 3%,#000 22%),linear-gradient(to bottom,rgb(0 0 0/0) 0,#000 calc(var(--header-h) + 46px));
mask-image:linear-gradient(to left,#000 52%,rgb(0 0 0/0) 96%),linear-gradient(to top,rgb(0 0 0/0) 3%,#000 22%),linear-gradient(to bottom,rgb(0 0 0/0) 0,#000 calc(var(--header-h) + 46px));
-webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect}
.hero-photo .fig{width:100%;height:100%;object-fit:cover;object-position:62% 50%;border-radius:0}
.about{padding:clamp(64px,6.4vw,104px) 0 clamp(70px,7vw,116px)}
.about-body{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(40px,5.6vw,92px);align-items:center}
.about-art{position:relative;overflow:hidden;border-radius:var(--r-md)}
.about-art .ph,.about-art .fig{aspect-ratio:1/1.06}
.about-text .lead{font-family:var(--serif);font-size:clamp(21px,2.1vw,27px);line-height:1.42;letter-spacing:-.015em}
.about-text>p+p{margin-top:19px}
.about-text .lede{font-size:16px}
.note-card{display:flex;gap:19px;align-items:center;margin-top:34px;padding:22px 25px;border-radius:var(--r-md)}
.note-card p{font-size:16px;line-height:1.6}
.note-card .icon-chip{color:var(--red)}
.services{background:var(--beige);padding:clamp(64px,6.4vw,104px) 0 clamp(70px,7vw,112px)}





.svc-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.svc-bento>:nth-child(1){grid-column:span 8}
.svc-bento>:nth-child(2){grid-column:span 4}
.svc-bento>:nth-child(3){grid-column:span 4}
.svc-bento>:nth-child(4){grid-column:span 8}
.svc-bento>:nth-child(5){grid-column:span 8}
.svc-bento>:nth-child(6){grid-column:span 4}
.svc{display:flex;flex-direction:column;padding:32px 34px 34px}
.svc h3{margin-top:15px;margin-bottom:0}
.svc-kicker{margin-top:18px}
.svc-text{margin-top:13px;font-size:16px;color:var(--ink-2)}
.svc-body{list-style:none;margin-top:24px}
.svc-tile{overflow:hidden;border-radius:var(--r-lg);min-height:260px;box-shadow:var(--sh-soft)}
.svc-tile .fig,.svc-tile .ph{height:100%;border-radius:0}
.principle-bg.ph{position:absolute;inset:0}
.svc-num{font-size:14px;font-weight:500;color:var(--red);font-variant-numeric:tabular-nums}

.svc h3{font-family:var(--serif);font-size:clamp(22px,1.9vw,28px);font-weight:400;line-height:1.22;letter-spacing:-.015em}









.svc-body li{position:relative;padding:12px 0 12px 27px;border-top:1px solid var(--line);font-size:16px;line-height:1.6}
.svc-body li svg{position:absolute;left:0;top:17px;width:15px;height:15px;color:var(--red)}

/* Mesh: two colour blobs over a tilted dark base. Both are parked on the
   right half, over the button rather than over the copy -- at the density the
   brand blue needs to register, the lede would drop under 4.5:1 on top of it.
   The blue is lifted off --accent-2 (#619bb6 reads as haze on a dark panel);
   the second, deeper blob keeps the corner from going flat. */
.svc-cta{background:radial-gradient(34% 62% at 84% 26%,rgb(150 216 244/.42) 0%,rgb(150 216 244/0) 70%),radial-gradient(64% 108% at 97% -8%,rgb(120 196 232/.88) 0%,rgb(120 196 232/0) 62%),radial-gradient(58% 104% at 72% 126%,rgb(43 116 186/.72) 0%,rgb(43 116 186/0) 64%),linear-gradient(118deg,#2b2f37 0%,#373c45 56%,#404652 100%);margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:40px 42px;border-radius:var(--r-lg)}
.svc-cta h3{font-family:var(--serif);font-size:clamp(25px,2.4vw,34px);font-weight:400;letter-spacing:-.015em;line-height:1.2}
.svc-cta p{margin-top:11px;font-size:16px;max-width:56ch}
.approach{padding:clamp(64px,6.4vw,104px) 0 clamp(70px,7vw,112px)}
/* Bento: three columns, two rows. The first card runs the full height of
   the block on the left, and the remaining four sit as two vertical pairs
   beside it. Placement is explicit rather than left to auto-flow, because
   the pairs have to line up by column and five cells would otherwise leave
   a hole. Renumbering or reordering the cards means revisiting this. */
.principles{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.principles>:nth-child(1){grid-column:1;grid-row:1/span 2}
.principles>:nth-child(2){grid-column:2;grid-row:1}
.principles>:nth-child(3){grid-column:2;grid-row:2}
.principles>:nth-child(4){grid-column:3;grid-row:1}
.principles>:nth-child(5){grid-column:3;grid-row:2}
.principle{position:relative;overflow:hidden;display:flex;padding:30px 30px 33px;border-radius:var(--r-lg);min-height:250px}
/* The tall first card keeps its text on the bottom edge, where the
   photograph wants it. The four small ones read from the top. */
.principle-body{position:relative;z-index:1;margin-top:auto}
.principles>:nth-child(n+2) .principle-body{margin-top:0}
.principle-num{display:block;margin-bottom:14px}
.principle-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* The light cards in this block sit straight on --paper with nothing
   between them, and at --card they were barely separating from it. This
   is one step deeper: 4.6 in L* against the page instead of 3.2. */
.principle:not(.principle--dark){background:var(--card-2)}
.principle.principle--dark{color:var(--on-dark)}
.principle.principle--dark p{color:var(--on-dark)}
.principle.principle--dark .principle-num{color:#ff8a78}
.principle--gradient{background:linear-gradient(158deg,#3c414a 0%,#191c22 100%)}
.principle--photo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgb(18 21 26/.34) 0%,rgb(14 16 20/.88) 100%)}


.principle-num{font-size:14px;font-weight:500;color:var(--red);font-variant-numeric:tabular-nums}
.principle h3{font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.22;letter-spacing:-.015em;margin-bottom:14px}
.principle p{font-size:16px;line-height:1.72;color:var(--ink-2)}
/* No padding above: the band is the top edge of the section, and a strip of
   background over it read as a gap rather than as a break. */
.faq{background:var(--beige);padding:0 0 clamp(70px,7vw,112px)}
/* Horizontal break across the whole section, edge to edge, dissolving into
   the section's own background on the way down -- so no bottom edge and no
   card framing, and the height is set directly rather than by a ratio, which
   at this width would run away on a large monitor. The container must clip:
   with data-anim="media" the picture runs from scale 1.16 down to 1 inside it. */
.faq-band{overflow:hidden;margin-bottom:clamp(-40px,-2.5vw,-12px);
-webkit-mask-image:linear-gradient(to bottom,#000 46%,rgb(0 0 0/0) 100%);
mask-image:linear-gradient(to bottom,#000 46%,rgb(0 0 0/0) 100%)}
.faq-band .fig,.faq-band .ph{width:100%;height:clamp(260px,30vw,520px);object-position:50% 45%;border-radius:0}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5.4vw,88px);align-items:start}
.faq-aside h2{font-size:clamp(34px,4vw,56px)}
.faq-aside .lede{margin-top:20px;font-size:16px;max-width:40ch}
.tablist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tab{border:0;border-radius:var(--r-btn);background:var(--paper);padding:11px 19px;font-size:14px;font-weight:500;color:var(--ink-2);box-shadow:var(--sh-soft);transition:background .2s,color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{background:var(--ink);color:var(--on-dark)}
.faq-panel[hidden]{display:none}
.faq-panel{display:grid;gap:9px}
.faq-item{border-radius:var(--r-md);overflow:hidden}
.faq-item summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:22px;align-items:center;padding:21px 24px;cursor:pointer;font-size:16px;font-weight:500;line-height:1.45}
.faq-item summary::-webkit-details-marker{display:none}
.faq-mark{width:32px;height:32px;border-radius:var(--r-sm);background:var(--beige);display:grid;place-items:center;color:var(--ink);transition:background .2s,color .2s}
.faq-mark svg{width:14px;height:14px;transition:transform .25s}
.faq-item[open] .faq-mark svg{transform:rotate(45deg)}
.faq-item summary:hover .faq-mark{color:var(--red)}
.faq-item>p{font-size:16px;line-height:1.75;color:var(--ink-2);padding:0 60px 24px 24px}
.contact{padding:clamp(64px,6.4vw,104px) 0 clamp(70px,7vw,112px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.4vw,90px);align-items:start}
.contact-intro{font-size:16px}
.email-link{display:inline-block;margin-top:28px;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.02em;padding-bottom:7px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;transition:color .2s,border-color .2s}
.email-link:hover{color:var(--accent);border-color:var(--accent)}
.steps{margin-top:46px}
.steps h3{font-size:16px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.steps ol{list-style:none}
.steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}
.step-num{font-size:14px;font-weight:500;color:var(--red);padding-top:4px;font-variant-numeric:tabular-nums}
.step-copy strong{display:block;font-size:16px;font-weight:500;margin-bottom:3px}
.step-copy p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:44ch}
.form-card{padding:clamp(26px,2.6vw,38px);border-radius:var(--r-lg)}
.field{display:block;margin-bottom:19px}
.field-label{display:block;font-size:14px;font-weight:500;margin-bottom:9px}
.field-label small{font-size:14px;font-weight:400;color:var(--ink-ph)}
.field input,.field textarea{display:block;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;color:var(--ink);font-size:16px;line-height:1.6;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgb(125 131 141/.2)}
.field textarea{height:136px;min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-ph);opacity:1}
.form-note{font-size:14px;line-height:1.65;color:var(--ink-ph)}
.form-note+.form-note{margin-top:11px}
.link-btn{border:0;background:none;padding:0;color:inherit;font:inherit;border-bottom:1px solid var(--line);line-height:1.4;transition:color .2s,border-color .2s;text-align:left}
.link-btn:hover{color:var(--accent);border-color:var(--accent)}
.form-card .btn{width:100%;margin-top:20px}
/* The honeypot has to be reachable by a bot parsing the DOM and invisible to
   everyone else, so it is moved out of view rather than display:none, which
   the cruder ones skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;font-size:14px;line-height:1.6;padding-left:15px;border-left:2px solid var(--line)}
.form-status:empty{display:none}
.form-status--ok{border-color:var(--ink);color:var(--ink)}
.form-status--err{border-color:var(--red);color:var(--ink-2)}
.legal{padding:clamp(40px,4.4vw,72px) 0 clamp(64px,6.4vw,104px)}
.legal-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(40px,5vw,88px);align-items:start}
.legal-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.legal-card{padding:clamp(26px,2.6vw,36px)}
.legal-card h1{font-size:clamp(30px,3.2vw,46px)}
.legal-card .lede{margin-top:16px;font-size:16px}
.legal-meta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.legal-back{margin-top:22px}
.legal-back svg{width:15px;height:15px;color:var(--red)}
.legal-doc h2{font-family:var(--serif);font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.25;letter-spacing:-.015em;margin:38px 0 14px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.legal-doc p+p,.legal-doc ul+p,.legal-doc p+ul{margin-top:14px}
.legal-doc strong{color:var(--ink);font-weight:500}
.legal-doc ul{margin-top:14px;display:grid;gap:10px;list-style:none}
.legal-doc li{position:relative;padding-left:25px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.legal-doc li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:2px;border-radius:1px;background:var(--red)}
.notfound{max-width:52ch;padding:clamp(30px,5vw,80px) 0}
.notfound h1{font-size:clamp(32px,4.4vw,62px)}
.notfound .lede{margin-top:20px;font-size:16px}
.site-footer .brand-logo{height:48px}
.site-footer{background:var(--card);padding:clamp(48px,5vw,74px) 0 30px}
.footer-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,.9fr);gap:clamp(32px,4vw,64px);padding-bottom:44px}
.footer-tagline{margin-top:20px;font-size:16px;line-height:1.75;color:var(--ink-2);max-width:36ch}
.footer-email{display:inline-block;margin-top:20px;font-size:16px;border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .2s,border-color .2s;overflow-wrap:anywhere}
.footer-email:hover{color:var(--accent);border-color:var(--accent)}
.footer-col h4{font-size:16px;font-weight:500;color:var(--ink-2);margin:0 0 16px}
.footer-col ul{list-style:none;display:grid;gap:11px}
.footer-col li{position:relative;padding-left:20px}
.footer-col li svg{position:absolute;left:0;top:7px;width:13px;height:13px;color:var(--red)}
.footer-col a,.footer-col .link-btn{font-size:16px;color:var(--ink-2);border:0;transition:color .2s}
.footer-col a:hover,.footer-col .link-btn:hover{color:var(--ink)}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;font-size:16px;color:var(--ink-2)}



.legal-disclaimer{position:relative;margin-top:22px;padding:20px 0 0 30px;border-top:1px solid var(--line);font-size:14px;line-height:1.75;color:var(--ink-2)}
.disclaimer-mark{position:absolute;left:0;top:25px;width:16px;height:16px;color:var(--red)}
.cookie-note{position:fixed;left:var(--gutter);right:var(--gutter);bottom:18px;z-index:60;max-width:760px;margin-inline:auto;padding:19px 24px;border-radius:var(--r-md);box-shadow:0 10px 40px rgb(23 27 33/.16);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cookie-note[hidden]{display:none}
.cookie-note p{flex:1 1 320px;font-size:16px;line-height:1.65;color:var(--ink-ph)}
.cookie-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
dialog{width:min(660px,calc(100% - 28px));max-height:calc(100dvh - 52px);padding:0;border:0;border-radius:var(--r-lg);background:var(--paper);color:var(--ink);margin:auto;overflow:auto;box-shadow:0 30px 70px rgb(23 27 33/.26)}
dialog::backdrop{background:rgb(20 23 28/.5);backdrop-filter:blur(4px)}
.dialog-inner{padding:clamp(26px,3vw,42px)}
.dialog-top{display:flex;justify-content:flex-end;margin-bottom:26px}
.dialog-close{border:0;background:var(--beige);border-radius:var(--r-btn);padding:9px 18px;font-size:14px;transition:background .2s,color .2s}
.dialog-close:hover{background:var(--ink);color:var(--on-dark)}
.dialog-title{font-family:var(--serif);font-size:clamp(27px,3vw,38px);font-weight:400;letter-spacing:-.02em;line-height:1.14;margin-bottom:20px}
.dialog-inner>p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.dialog-inner>p+p{margin-top:15px}
.dialog-inner>ul{margin-top:15px;padding-left:21px;font-size:16px;line-height:1.8;color:var(--ink-2);display:grid;gap:6px}
.dialog-inner>ul li::marker{color:var(--red)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.msg-preview{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:14px;line-height:1.75;background:var(--card);border-radius:var(--r-sm);padding:19px;max-height:250px;overflow:auto;margin:20px 0 0}
.copy-status{font-size:14px;margin-top:13px;min-height:21px;color:var(--ink-ph)}
/* Large monitors: the copy column widens first, which is what allows the H1
   ceiling to rise with it (780px at 78px and 900px at 90px are the same fit),
   and the two small text blocks go up a point so the column does not read as a
   postcard pinned to a wall. */
@media(min-width:1600px){
.hero-copy{max-width:min(100%,900px)}
.hero h1{font-size:min(clamp(42px,5.9vw,90px),clamp(42px,calc(12.2svh - 31px),90px))}
.hero-points li{font-size:17px}
.hero-intro{max-width:680px;font-size:17px}
}
@media(max-width:1180px){
:root{--header-h:85px}
.header-inner{height:84px}.main-nav a{padding:9px 12px;font-size:14px}



.principles{grid-template-columns:repeat(2,minmax(0,1fr))}
.principles>:nth-child(n){grid-area:auto}
.principles>:last-child{grid-column:span 2}
.svc-bento>:nth-child(n){grid-column:span 6}
.svc{padding:30px 30px 32px}
.faq-grid{gap:44px;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr)}
.footer-main{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr);gap:36px}
}
@media(max-width:900px){
/* On a phone the photograph goes above the copy instead of behind it: full
   width, and dissolving at both ends -- out of the background at the top, into
   it again at the bottom, so it has no edge of its own anywhere. The upper
   ramp is the long one -- half the height of the band, with a stop half way
   through it so the climb is gradual rather than a visible line -- because
   that end is the one that has to meet the header quietly. It starts
   below the header rather than under it: the run where it sat behind the logo
   and the menu button was unreadable at both ends. It is a flex item with
   flex:1, so it takes whatever height is left once the copy has had what it
   needs -- the first screen stays exactly one screen on a tall phone, and on a
   short one the picture gives way rather than the text. */
.hero{display:flex;flex-direction:column;min-height:100svh}
.hero-photo{display:block;position:relative;z-index:0;flex:1 1 clamp(180px,24svh,300px);width:100%;min-height:0;
-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/0) 0,rgb(0 0 0/.5) 30%,#000 56%,#000 70%,rgb(0 0 0/0) 100%);
mask-image:linear-gradient(to bottom,rgb(0 0 0/0) 0,rgb(0 0 0/.5) 30%,#000 56%,#000 70%,rgb(0 0 0/0) 100%);
-webkit-mask-composite:source-over;mask-composite:add}
.hero-photo .fig{object-position:50% 46%}
.hero-inner{flex:0 0 auto;min-height:0}
:root{--gutter:26px;--r-lg:14px;--r-md:12px}
:root{--header-h:77px}
.header-inner{height:76px;gap:14px}
.main-nav{display:none}.header-cta{display:none}
.mobile-menu{display:block;margin-left:auto;position:relative}
.mobile-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:9px;background:var(--beige);border-radius:var(--r-btn);padding:11px 19px;font-size:14px;font-weight:500;cursor:pointer}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu>summary svg{width:14px;height:14px;transition:transform .25s}
.mobile-menu[open]>summary svg{transform:rotate(45deg)}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + 12px);width:min(74vw,290px);display:grid;gap:3px;padding:16px;border-radius:var(--r-md);background:var(--paper);box-shadow:0 18px 44px rgb(23 27 33/.18)}
.mobile-menu nav a{padding:11px 14px;border-radius:var(--r-sm);font-size:16px;color:var(--ink-2)}
.mobile-menu nav a:hover{background:var(--beige);color:var(--ink)}
.hero h1{font-size:clamp(40px,8vw,60px)}

.section-head .lede{max-width:60ch}
.about-body{grid-template-columns:1fr;gap:36px}
.about-art{order:2}.about-art .ph,.about-art .fig{aspect-ratio:1.5}

.principles{grid-template-columns:repeat(2,minmax(0,1fr))}
.principles>:nth-child(n){grid-area:auto}
.principles>:last-child{grid-column:span 2}
.svc-cta{grid-template-columns:1fr;gap:22px;padding:28px}
.faq-grid{grid-template-columns:1fr;gap:36px}
.legal-grid{grid-template-columns:1fr;gap:34px}
.legal-aside{position:static}
.faq-aside .lede{max-width:58ch}
.contact-grid{grid-template-columns:1fr;gap:44px}
.footer-main{grid-template-columns:1fr 1fr;gap:32px}
.footer-brand{grid-column:1/-1}
}
@media(max-width:620px){
:root{--gutter:18px}
/* Tighter rhythm than the desktop hero: with the photograph above it, the
   column has a screen to share rather than a screen to fill. */
.hero-inner{--gap:clamp(20px,3.4svh,34px);--gap-lift:clamp(10px,2svh,22px)}
html{scroll-padding-top:92px}
.brand-logo{height:40px}
.hero h1{font-size:clamp(33px,9.4vw,46px)}
.hero-actions{gap:16px}
.section-head h2{font-size:clamp(30px,9vw,42px)}

.about-text .lead{font-size:20px}
.note-card{padding:19px 20px;gap:15px;margin-top:28px}




.svc-body li{font-size:16px}
.principles{grid-template-columns:1fr;gap:12px}
.principles>:nth-child(n){grid-area:auto}
.svc-bento{gap:16px}
.svc-bento>:nth-child(n){grid-column:span 12}
.svc{padding:26px 24px 28px}
.svc-tile{min-height:0;aspect-ratio:1.7}
.principle{padding:24px 22px 26px;min-height:220px}

.faq-item summary{font-size:16px;padding:18px 18px;gap:14px}
.faq-item>p{padding:0 18px 20px}
.email-link{font-size:23px}
.steps{margin-top:36px}
.form-card{padding:22px 20px}
.footer-main{grid-template-columns:1fr;gap:30px;padding-bottom:34px}
.footer-bottom{gap:14px}
.cookie-note{left:12px;right:12px;bottom:12px;padding:17px 19px;gap:15px}
.cookie-actions{width:100%;gap:14px}
.cookie-actions .btn{flex:1}
.dialog-actions{flex-direction:column}
.dialog-actions .btn{width:100%}
}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}[data-anim]{opacity:1!important;transform:none!important}}
@media print{
.site-header{position:static}
.main-nav,.header-cta,.mobile-menu,.hero-actions,.back-top,.form-card,.tablist,.cookie-note,.faq-mark,.svc-cta{display:none}
body{background:#fff}
.hero,.about,.services,.approach,.faq,.contact,.site-footer{padding:22px 0;background:#fff}
.card,.svc,.faq-item{box-shadow:none;background:#fff;border:1px solid var(--line)}
.faq-panel[hidden]{display:block!important}

.about-body,.faq-grid,.contact-grid{display:block}
.principles{grid-template-columns:repeat(2,1fr)}
.principles>:nth-child(n){grid-area:auto}
.ph,.fig{min-height:180px}
h2,h3{break-after:avoid}
.principle,.faq-item,.svc{break-inside:avoid}
dialog{display:none!important}
}