/* Cendavo "Daylight" design system (Task 33). Order: fonts, tokens, base, chrome, components, inner pages, utilities, responsive, motion.
   Fonts are self-hosted WOFF2 (OFL, see /assets/fonts/), so the site makes no third-party requests (CSP font-src 'self').
   Paper, ink and one amber; photography brings the colour. Motion lives only in the guarded blocks at the end: two curves
   (--ease-out for entrances, --ease-io between states) and four durations. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-regular-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-bold-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Digits only: Atkinson draws a slashed zero, so body-text numerals 0-9 come from Archivo. Declared after the Atkinson faces with the same weights, so these win for U+0030-0039. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");font-weight:400;font-style:normal;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");font-weight:700;font-style:normal;unicode-range:U+0030-0039;font-display:swap}
:root{
--paper:#FFFFFF;--warm:#F6F5F1;--warm-2:#EEECE5;--ink:#0E0E0D;--ink-2:#2A2926;--mute:#605D57;--amber:#D9A441;--amber-ink:#8C5A1C;--ok:#1E6B47;--danger:#A3341F;
/* Night Shift greys, kept for the few ink surfaces (the demo's side panel, the homepage showreel button) */
--bone:#EDEAE3;--bone-2:#E3DFD6;--stone:#A8A49B;--ink-soft:#4F4C46;--amber-hover:#E6B65A;
--line:rgba(14,14,13,.1);--line-2:rgba(14,14,13,.16);--line-dark:rgba(14,14,13,.14);
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-pill:999px;
--shadow-1:0 1px 2px rgba(14,14,13,.08);--shadow-2:0 0 0 1px rgba(14,14,13,.07),0 1px 2px rgba(14,14,13,.05),0 10px 24px -12px rgba(58,40,12,.22);--shadow-lift:0 0 0 1px rgba(14,14,13,.06),0 6px 14px -6px rgba(58,40,12,.16),0 22px 48px -18px rgba(14,14,13,.22);
--ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.7,0,.2,1);--dur-1:200ms;--dur-2:400ms;--dur-3:700ms;--dur-4:1000ms;
--font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-text:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
--text-display:clamp(3rem,7.3vw,7.1rem);--text-h2:clamp(2.1rem,4.4vw,4.25rem);--text-h3:clamp(1.25rem,1rem + .8vw,1.75rem);--text-body:clamp(1.0625rem,.35vw + .98rem,1.1875rem);--text-small:.9375rem;
--measure:65ch;--max:1440px;--gut:clamp(16px,4.2vw,64px);--section:clamp(64px,8vw,120px);--section-lg:clamp(88px,12vw,176px);--col-gap:clamp(16px,2vw,32px)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:90px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--text-body)/1.55 var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{color-scheme:light}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
img{height:auto}
/* The build wraps every photo in <picture> for its AVIF source; display:contents keeps the img itself the grid/flex item.
   <source> is not display:none by default, so hide it or it becomes an extra grid/flex item. */
picture{display:contents}picture>source{display:none}
figure{margin:0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-display);font-weight:760;font-stretch:88%;letter-spacing:-.02em;line-height:1;margin-bottom:var(--space-4);text-wrap:balance}
h1{font-size:clamp(2.75rem,6vw,5.5rem);line-height:.95}
h2{font-size:var(--text-h2);line-height:.98}
h3{font-size:var(--text-h3);font-weight:650;font-stretch:100%;line-height:1.1;letter-spacing:-.01em}
p{margin-bottom:var(--space-4);max-width:var(--measure)}
::selection{background:var(--amber);color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{display:block;margin-bottom:var(--space-3);color:var(--amber-ink);font:600 var(--text-small)/1.3 var(--font-display)}

/* Header and navigation */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--line-dark)}
.nav{min-height:76px;display:flex;align-items:center;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-right:auto;color:var(--ink);font:650 15px/1 var(--font-display);font-stretch:118%;letter-spacing:.2em;text-decoration:none}
.mark{width:30px;height:30px;fill:currentColor}
.mark path:first-child{fill:var(--amber)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,32px);color:var(--ink-2)}
.nav-links a,.footer-links a,.ulink{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.nav-links a::after,.footer-links a::after,.ulink::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%}
.nav-links a:hover::after,.nav-links a[aria-current]::after,.footer-links a:hover::after,.footer-links a[aria-current]::after,.ulink:hover::after,.ulink:focus-visible::after,.ulink.strong::after{transform:scaleX(1)}
.ulink.strong{font:620 1rem/1.2 var(--font-display)}
/* The public email address (footer, Contact): a plain underlined link that may wrap on the narrowest phones. */
.mail{text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}
.menu{display:none;align-items:center;justify-content:center;min-height:48px;min-width:48px;border:1px solid var(--line-dark);border-radius:var(--radius-pill);background:transparent;color:var(--ink)}
.menu span{display:block;width:22px;height:12px;border-block:1.5px solid currentColor;font-size:0}

/* Buttons (pills): amber (default; on ink surfaces), outline, dark (ink, on paper); sizes small and large. The header's
   consultation button is the dark one. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--amber);color:var(--ink);font:620 1rem/1.1 var(--font-display);text-align:center;text-decoration:none}
.button:hover{background:var(--amber-hover)}
.button.go::after{content:"";flex:none;width:8px;height:8px;margin-left:2px;border-top:1.7px solid;border-right:1.7px solid;transform:rotate(45deg)}
.button.outline{background:transparent;border-color:currentColor;color:inherit}
.button.outline{border-color:var(--line-2)}
.button.outline:hover{border-color:var(--ink);background:var(--warm)}
.button.dark,.site-header .button{background:var(--ink);color:#fff}
.button.dark:hover,.site-header .button:hover{background:var(--ink-2)}
.button.small{min-height:48px;padding:0 18px;font-size:.95rem}
.button.large{min-height:60px;padding:0 28px;font-size:1.0625rem}
.button[disabled]{opacity:.75;cursor:not-allowed}
.form[aria-busy="true"] .button[disabled]{cursor:progress}

/* Footer */
.footer{border-top:1px solid var(--line-dark);padding-top:clamp(56px,7vw,96px)}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-10)}
.footer p{margin:var(--space-4) 0 0;color:var(--mute);font-size:1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:0 var(--space-6)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:var(--space-12);padding:28px 0 36px;border-top:1px solid var(--line-dark);color:var(--mute);font-size:.9rem}
.footer-bottom p{margin:0;font-size:inherit}
/* Signature: the light oversized wordmark (aria-hidden in the markup), in the already-loaded Archivo at its widest, warm
   grey on paper. The frame is shorter than the line, so the page edge crops the letters; overflow:hidden also stops it ever
   widening the page on narrow screens. */
.footer-sign{overflow:hidden;height:.6em;font:800 clamp(3.5rem,15.5vw,24rem)/.8 var(--font-display);font-stretch:125%;letter-spacing:-.02em;text-align:center;white-space:nowrap;color:#ECE9E1;user-select:none}
.footer-word{display:block}

/* Forms (enquiry form hooks: .field-error, [aria-invalid], .status[data-tone], .hp). Daylight fields: white, rounded, an ink
   border and an amber halo on focus (the ink outline stays the visible focus indicator). */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px;align-content:start;min-width:0;font:650 .9375rem/1.25 var(--font-display)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);font:400 1rem/1.4 var(--font-text)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(14,14,13,.36)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,164,65,.35)}
.field textarea{min-height:140px;resize:vertical}
.field .optional,.field-hint{font-weight:400;color:var(--mute)}
.field-hint{margin:0;font:400 .875rem/1.4 var(--font-text)}
.req{color:var(--danger)}
.field-error{margin:0;color:var(--danger);font:700 .875rem/1.4 var(--font-text)}
.field-error:empty{display:none}
.field [aria-invalid="true"]{border-color:var(--danger);border-width:2px}
.status{min-height:24px;margin:var(--space-3) 0 0;color:var(--ok);font-weight:700}
.status[data-tone="error"]{color:var(--danger)}

/* Demonstration project (demo page) */
.demo-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-6);align-items:start}
.demo-side{padding:var(--space-8);border-radius:22px;background:var(--ink);color:var(--bone)}
.demo-main{padding:var(--space-8);border-radius:22px;background:#fff;box-shadow:var(--shadow-lift)}
.eyebrow.light{color:var(--amber)}
/* Task 43: the sidebar is 280px wide, so its heading gets a size that fits it and may wrap rather than run out of the card. */
.demo-side h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.05;overflow-wrap:anywhere;text-wrap:balance}
.demo-side h3{font-size:1.25rem}
.demo-side p{color:var(--stone);font-size:var(--text-small)}
.demo-side .notice{margin:var(--space-3) 0 0}
.metric{margin:var(--space-8) 0 var(--space-2);font:780 2.5rem/1 var(--font-display);letter-spacing:-.02em}
.demo-actions{display:grid;gap:var(--space-3);margin-top:var(--space-1)}
.demo-actions .button{width:100%}
.demo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.demo-toolbar h2{font-size:1.75rem;margin:0}
.table-wrap{overflow-x:auto}
.data-table{border-collapse:collapse;width:100%;font-size:.875rem}
.data-table th{text-align:left;color:var(--mute);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.data-table th,.data-table td{padding:var(--space-4);border-bottom:1px solid var(--line-dark);white-space:nowrap}
.pill{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);background:#E1EDE5;color:var(--ok);font-weight:700}
.pill.open{background:#F3E6CC;color:#6E4A10}
.pill.done{background:var(--warm-2);color:var(--ink-2);text-decoration:line-through}
tr.selected{background:#F3EBD8;outline:2px solid var(--ink);outline-offset:-2px}
td.actions{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.table-action{min-height:36px;padding:7px 12px;border:0;border-radius:var(--radius-pill);background:var(--warm-2);color:var(--ink)}
.table-action[aria-pressed="true"]{background:var(--ink);color:var(--bone)}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-6)}
.demo-box{padding:var(--space-6);border-radius:18px;background:var(--warm)}
.empty{padding:var(--space-5);color:var(--mute);text-align:center}

/* Focus, skip link and utilities. Ink ring on paper and warm surfaces (the default); bone or white rings on the ink surfaces
   (the demo's side panel here, the closing bands in home.css and pages.css). Amber is below 3:1 on paper, so it is never a ring. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.demo-side :focus-visible{outline-color:var(--bone)}
/* Task 47: the demo's date field keeps a full ring while focus is anywhere inside it, including its calendar button (the
   button rule stands alone: a browser that does not know the pseudo-element drops only that rule). */
input[type="date"]:focus-visible,input[type="date"]:focus-within{outline:2px solid var(--ink);outline-offset:3px}
input[type="date"]::-webkit-calendar-picker-indicator:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
/* Task 47: the demo's CSV button is a solid light pill on the ink panel (the glass outline button was translucent there,
   so its text contrast depended on what showed through). */
#export-demo{border-color:#FBFAF7;background:#FBFAF7;color:#0E0E0D;-webkit-backdrop-filter:none;backdrop-filter:none}
#export-demo:hover{border-color:#FFFFFF;background:#FFFFFF;color:#0E0E0D}
main:focus{outline:none;box-shadow:none}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;padding:12px 18px;border-radius:var(--radius-sm);background:var(--ink);color:#fff;font-weight:700}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* Responsive */
/* Desktop header: one row. Demo project stays in the footer and the mobile menu; no-wrap is desktop-only so mobile labels and the full-width button can still wrap. */
@media(min-width:1081px){
.nav-links .nav-optional{display:none}
.nav-links a,.nav>.button{white-space:nowrap}
}
@media(max-width:1080px){
.nav{flex-wrap:wrap;gap:var(--space-3) var(--space-4)}
.nav-links{order:3;width:100%;flex-wrap:wrap;padding-bottom:var(--space-3)}
.nav>.button{order:4;margin-bottom:var(--space-4)}
.js .menu{display:inline-flex}
.js .nav-links{display:none}
.js .nav-links.open{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:var(--space-2);border-top:1px solid var(--line-dark);color:var(--ink)}
.js .nav-links.open a{min-height:56px;border-bottom:1px solid var(--line-dark);font:760 clamp(1.75rem,7vw,2.5rem)/1.05 var(--font-display);font-stretch:88%;letter-spacing:-.015em}
.js .nav-links.open a::after{display:none}
.js .nav>.button{order:0;margin-bottom:0}
.js .menu[aria-expanded="true"]~.button{order:4;margin-bottom:var(--space-4)}
/* Task 47: site.js sets .menu-lock while the menu is open, so the page behind it stays put (mobile layouts only). */
html.menu-lock,html.menu-lock body{overflow:hidden}
/* The menu scrolls inside itself instead, so its last link stays reachable on short (landscape) screens. */
html.menu-lock .site-header .nav{max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:860px){
.demo-shell,.demo-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
.nav>.button{width:100%}
.js .nav>.button{display:none}
.js .menu[aria-expanded="true"]~.button{display:inline-flex}
.demo-main,.demo-side{padding:var(--space-5)}
}

/* Motion: only for people who have not asked for reduced motion; transform only, hover feedback within 200 ms. GSAP pages use their own matchMedia guard. */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.nav-links a::after,.footer-links a::after,.ulink::after,.button.go::after{transition:transform var(--dur-1) var(--ease-out)}.button.go:hover::after,.button.go:focus-visible::after{transform:translateX(2px) rotate(45deg)}}

@media(prefers-reduced-motion:no-preference){
/* Page transitions (Night Shift Task 29): cross-document View Transitions, only for people who have not asked for reduced
   motion; browsers without support navigate as usual. The header stays put, the page's one H1 morphs into the next page's,
   and the new page wipes up over the old one (450 ms). Each name is given to one element per page. The cursor ring
   belongs to details.js, which no page loads since Daylight (Task 34); it never takes clicks and the native cursor stays.
   Task 48: the name sits on the glass nav pill, never on .site-header: a named element is captured as its own layer, so
   in Chromium a backdrop-filter inside it could only blur the (empty) header, never the page scrolling under it. */
@view-transition{navigation:auto}
.site-header .nav{view-transition-name:site-header}
main h1{view-transition-name:page-title}
::view-transition-old(root){animation:vt-out 450ms cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){animation:vt-in 450ms cubic-bezier(.7,0,.2,1) both}
::view-transition-group(page-title){animation-duration:450ms;animation-timing-function:cubic-bezier(.7,0,.2,1)}
@keyframes vt-out{to{transform:translateY(-4%)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.cursor-ring{position:fixed;top:0;left:0;z-index:200;width:0;height:0;pointer-events:none;mix-blend-mode:difference}
.cursor-ring span{position:absolute;top:-18px;left:-18px;width:36px;height:36px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;transition:transform var(--dur-1) var(--ease-out)}
.cursor-ring.is-link span{transform:scale(1.6)}
}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}