/* Cendavo Daylight inner pages (Task 34, from docs/design/daylight/prototype/pages.css): the parts every inner page shares
   (page hero, sections, FAQ, closing band, the Pause motion button) plus the three small pages (Contact, Demo, 404).
   Work, Services, Pricing and About add their own sheet; device frames and illustrations live in kit.css. Tokens, buttons,
   forms and focus rings come from site.css. Nothing is hidden outside the guarded block at the end, and there only while
   motion-boot.js holds .ph-wait. */
.band-warm{background:var(--warm)}
.sec{padding:clamp(72px,8vw,128px) 0}
.sec-tight{padding:clamp(48px,6vw,88px) 0}
.h2{margin:0;font-size:clamp(2.3rem,1.2rem + 3.6vw,4.5rem);font-weight:780;font-stretch:86%;line-height:.95;letter-spacing:-.03em}
.lede-l{margin:22px 0 0;max-width:40rem;color:var(--ink-2);font-size:clamp(1.15rem,1rem + .45vw,1.375rem);line-height:1.5}
.photo{position:relative;margin:0;overflow:hidden;border-radius:18px;background:var(--warm-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--warm);box-shadow:inset 0 0 0 1px rgba(140,90,28,.18);color:var(--amber-ink);font:600 .8125rem/1 var(--font-display)}
.chip-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.tag{display:inline-flex;align-items:center;padding:.3em .6em;border-radius:999px;background:var(--warm);box-shadow:inset 0 0 0 1px rgba(140,90,28,.18);color:var(--amber-ink);font:600 .75em/1 var(--font-display)}
.note,.notice{font-size:var(--text-small)}
.note{color:var(--mute)}
.banner{padding:16px 18px;border-radius:14px;background:var(--warm);box-shadow:inset 0 0 0 1px rgba(140,90,28,.2);color:var(--ink);font-size:.9375rem;line-height:1.5}

/* Page hero: the H1 is plain text in line masks (motion.js lifts the lines through them; without it they simply show). */
.pg-hero{padding:clamp(40px,6vw,96px) 0 clamp(56px,6vw,96px)}
/* Liquid Glass page scene (Tasks 39 and 40: Work, Services, Pricing, About; Contact's .ct): glass-page.js draws into this aria-hidden host behind the hero,
   only on capable desktops without reduced motion or Save-Data. It never takes clicks, so the copy, links and video
   controls in front keep working. With data-gl-hide, .gl-lead fades the anchor's media once the scene is live; the media
   stays in the DOM and the accessibility tree, and every other visitor keeps it as it is. */
:is(.pg-hero,.ct):has(>.pg-gl){position:relative;isolation:isolate}
:is(.pg-hero,.ct):has(>.pg-gl)>.wrap{position:relative;z-index:1}
.pg-gl{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 72%,transparent);mask:linear-gradient(180deg,transparent,#000 12%,#000 72%,transparent)}
.pg-gl canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.gl-lead .sv-hero-media{opacity:0}.gl-lead .ab-photos{opacity:0}}
.pk{max-width:none;margin:0;font-size:clamp(2.7rem,1rem + 5.6vw,7rem);font-weight:820;font-stretch:84%;line-height:.9;letter-spacing:-.035em}
.pk-m{font-size:clamp(2.5rem,1rem + 4.4vw,5.8rem)}
.ln{display:block;overflow:hidden;padding:0 .08em .07em 0;margin-bottom:-.07em}
.ln>span{display:block}
.pg-sub{max-width:36rem;margin:clamp(22px,3vw,34px) 0 0;color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55}
.pg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* Questions (native details): heading left, answers right */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.faq-head{grid-column:1/5}
.faq-head p{margin-top:18px;max-width:30ch;color:var(--ink-2)}
.faq{grid-column:6/13;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:18px 0;list-style:none;cursor:pointer;font:720 clamp(1.125rem,1rem + .45vw,1.4rem)/1.25 var(--font-display);font-stretch:94%;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat}
.faq summary:hover::after{background-color:var(--warm)}
.faq details[open] summary::after{background-color:var(--amber);background-size:12px 1.5px,1.5px 0;box-shadow:none}
.faq details p{max-width:62ch;margin:0;padding:0 56px 26px 0;color:var(--ink-2)}

/* Closing call to action: the inner pages' one ink band (white focus ring), its photo dimmed behind the type. */
.close{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,9vw,128px) 0 clamp(64px,7vw,88px);background:var(--ink);color:#fff}
.close-media{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.34}
.close-media img{width:100%;height:100%;object-fit:cover}
/* Task 41: the ambient glass loop, softly blurred, in its own still layer over the drifting photo (which stays as the
   fallback: an unplayed video without its still is transparent); wide screens only. */
.close-loop{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.4;pointer-events:none}
.close-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px);transform:scale(1.06)}
.close-media::after,.close-loop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(14,14,13,.55) 40%,rgba(14,14,13,.7) 70%,var(--ink) 100%)}
.close-h{margin:0;max-width:none;font-size:min(9.4rem,9.6vw);font-weight:820;font-stretch:90%;line-height:.9;letter-spacing:-.04em}
.cl{display:block;white-space:nowrap}
.close-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:clamp(36px,5vw,64px);padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.close-foot p{max-width:42ch;margin:0;color:rgba(255,255,255,.82)}
.close :focus-visible{outline-color:#fff}

/* Contact: the steps left, the form on a warm panel right. The form markup is the enquiry contract (site.css styles it). */
.ct{padding:clamp(40px,6vw,88px) 0 clamp(72px,8vw,120px)}
.ct-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.ct-side{grid-column:1/6;padding-right:clamp(0px,2vw,32px)}
.pk-ct{font-size:clamp(2.6rem,1rem + 4.2vw,5.6rem)}
.ct-next{margin-top:clamp(36px,4vw,56px)}
.ct-next h2{margin:0 0 6px;font:700 1rem/1.2 var(--font-display);font-stretch:96%;letter-spacing:0}
.ct-steps{position:relative;list-style:none;margin:0;padding:0}
.ct-steps::before{content:"";position:absolute;left:17px;top:26px;bottom:26px;width:1px;background:var(--line-2)}
.ct-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:14px 0}
.ct-n{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);font:700 .9375rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.ct-steps li:last-child .ct-n{background:var(--amber);box-shadow:none}
.ct-steps b{display:block;font:720 1.0625rem/1.3 var(--font-display);font-stretch:94%}
.ct-steps span:not(.ct-n){color:var(--ink-2);font-size:1rem}
.ct-mail{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2)}
.ct-mail .mail{font-weight:700}
/* Task 41: the glass C's own fixed-size box at the top-right (the scene fits the C to it), so the form never clips it;
   the form panel sits above the scene layer all the same. Task 42: a little larger, so it reads as the homepage's C. */
.ct-side{grid-row:1/span 2}
.ct-gl-spot{grid-column:10/13;grid-row:1;justify-self:end;width:216px;height:216px;margin-bottom:16px}
.ct-form{position:relative;z-index:2;grid-row:2;grid-column:7/13;padding:clamp(22px,3.4vw,48px);border-radius:28px;background:var(--warm);box-shadow:inset 0 0 0 1px rgba(14,14,13,.04)}
.ct-form-h{margin:0 0 8px;font:780 clamp(1.6rem,1rem + 1.4vw,2.4rem)/1 var(--font-display);font-stretch:88%;letter-spacing:-.025em}
.ct-form .notice{margin:0;color:var(--mute);line-height:1.5}
/* Task 47: shown only without JavaScript (the form cannot send then); full ink, so it reads before the disabled form. */
.ct-noscript{margin:12px 0 8px;padding:14px 16px;border-radius:14px;background:var(--paper);color:var(--ink);font-size:1rem}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.form-foot{display:grid;gap:14px;margin-top:6px;padding-top:20px;border-top:1px solid var(--line-2)}
.form-foot .button{justify-self:start;background:var(--ink);color:#fff}
.form-foot .button:hover{background:var(--ink-2)}
.form-promise{max-width:62ch;margin:0;color:var(--ink-2);font-size:1rem}
.ct .status{margin-top:18px;font-size:1rem;line-height:1.5}
.ct .status:empty{display:none}

/* Demonstration project: the hero, then the app (its own markup and styles in site.css) on a warm band. */
.demo-hero{padding-bottom:clamp(40px,5vw,72px)}
.demo-app{border-top:1px solid var(--line)}
.demo-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.demo-hero-copy{grid-column:1/8}
.demo-hero-copy .chip{margin-bottom:24px}
.demo-hero-aside{grid-column:9/13;display:grid;gap:18px}
.demo-hero-aside p{margin:0;color:var(--ink-2)}

/* 404: what happened on the left, a browser window naming the requested address (site.js, text only) on the right. */
.nf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;min-height:min(calc(100svh - 180px),720px)}
.nf-copy{grid-column:1/7}
.nf-copy .chip{margin-bottom:24px}
.nf-win{grid-column:8/13;overflow:hidden;border-radius:18px;background:#fff;box-shadow:var(--shadow-lift)}
.nf-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;background:#F4F3EF;border-bottom:1px solid var(--line)}
.nf-bar i{flex:none;width:9px;height:9px;border-radius:50%;background:#D6D3CC}
.nf-url{flex:1;min-width:0;display:flex;align-items:center;height:28px;margin-left:8px;padding:0 12px;overflow:hidden;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);font-size:.8125rem;white-space:nowrap}
.nf-url b{overflow:hidden;text-overflow:ellipsis;font-weight:400;text-decoration:underline wavy rgba(163,52,31,.7);text-decoration-thickness:1px;text-underline-offset:3px}
.nf-body{padding:28px 24px 24px}
.nf-big{display:flex;gap:.04em;font:840 clamp(4.4rem,3rem + 5vw,8rem)/.85 var(--font-display);font-stretch:80%;letter-spacing:-.05em}
.z{color:var(--amber)}
.nf-body p{margin:12px 0 0;color:var(--mute);font-size:.9375rem}
.nf-sug{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.nf-sug a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;font:650 1rem/1 var(--font-display)}
.nf-sug a::after{content:"";width:8px;height:8px;margin-right:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.nf-sug a:hover{background:linear-gradient(90deg,var(--warm),transparent)}

@media(max-width:1023px){
.ct-side,.ct-form,.ct-gl-spot{grid-column:1/-1;grid-row:auto}
.ct-side{padding-right:0}
.ct-form{margin-top:48px}
}
@media(max-width:960px){
.demo-hero-copy,.demo-hero-aside,.nf-copy,.nf-win{grid-column:1/-1}
.demo-hero-aside,.nf-win{margin-top:28px}
.nf{min-height:0}
}
@media(max-width:900px){
.faq-head,.faq{grid-column:1/-1}
.faq{margin-top:12px}
.faq details p{padding-right:0}
}
@media(max-width:760px){.ct-gl-spot{display:none}}
/* Task 60: the demo's request table scrolls sideways below 1100px. A visible line says so, and a soft shadow marks the
   right edge while more columns sit beyond it: the white cover (the panel's colour) is fixed to the table's far end (local), so it
   slides over the shadow (fixed to the box's edge) and hides it once the last column is in view. Backgrounds only: the
   shadow paints under the table, never over a Draft reply button, and needs no script. */
.table-hint{display:none}
@media(max-width:1099px){
.table-hint{display:block;margin:0 0 10px;color:var(--mute);font-size:.875rem}
.table-wrap{background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0/40px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgba(14,14,13,.2),rgba(14,14,13,0)) 100% 0/16px 100% no-repeat scroll;background-color:#fff}
}
@media(max-width:640px){
.close-loop{display:none}
.field-row{grid-template-columns:minmax(0,1fr)}
.ct-form{border-radius:22px}
.form-foot .button,.close-foot .button,.pg-actions .button{width:100%}
}
/* Task 60: landscape phones (844x390). Pricing's and the 404's first button in view: less space above, a headline sized
   by the screen's height, tighter gaps, and buttons side by side at their own width. */
@media(max-height:500px){
.pr-hero,.pg-hero:has(>.nf){padding-top:16px}
.pr-hero .pk,.nf .pk{font-size:clamp(1.9rem,10svh,3.2rem)}
.pr-hero .pg-sub,.nf .pg-sub{margin-top:10px;font-size:1rem;line-height:1.45}
.pr-hero .pg-actions,.nf .pg-actions{gap:8px;margin-top:14px}
.pr-hero .pg-actions .button,.nf .pg-actions .button{width:auto}
.nf-copy .chip{margin-bottom:12px}
}

/* Motion: only for people who have not asked for reduced motion; only transform and opacity move, hover within 200 ms.
   Openings are held only while motion-boot.js holds .ph-wait (its 2.5 s failsafe always lets go), and exactly where
   motion.js takes them over: the headline lines, the rising copy and the un-masking frames of each page hero. Task 48: the
   copy is never held at opacity 0 (it only sits 18px low), so it paints with the headline and the largest paint is not
   delayed until the scripts run. */
@media(prefers-reduced-motion:no-preference){
.ph-wait :is(.wk-hero,.sv-hero,.pr-hero,.ab-hero) .ln>span{transform:translateY(108%)}
.ph-wait :is(.wk-hero .pg-sub,.wk-clip,.sv-hero .pg-sub,.chap-nav,.pr-hero .pg-sub,.pr-hero .pg-actions){transform:translateY(18px)}
.ph-wait :is(.sv-hero-media,.pr-hero .quote,.ab-photos .photo){clip-path:inset(0 0 0 100%)}
.nf-sug a::after{transition:transform var(--dur-1) var(--ease-out)}
.nf-sug a:hover::after{transform:translateX(4px) rotate(45deg)}
}