/* ==========================================================================
   Creative Culture Code — creativeculturecode.com
   Built to Brand Guidelines v1.5 (claude/brand-guidelines-v1.html)
   Pure monochrome. Emphasis by weight, scale and space — never colour.
   ========================================================================== */

:root{
  --carbon:#0C0D10;   /* primary dark ground */
  --slate:#3A3D45;    /* secondary panels, dividers on dark */
  --fog:#7C818C;      /* captions, metadata, muted labels (11px+) */
  --paper:#F7F5F0;    /* light ground — warm, never pure white */
  --hairline:#22242a; /* dividers on carbon */
  --hairline-light:#dcd8cd; /* dividers on paper */
  --ink-soft:#b9bcc2; /* body text on carbon */
  --ink-mute:#9a9da4; /* secondary body on carbon */
  --fog-light:#8b8778;/* fog equivalent on paper grounds */
  --sans:"Avenir Next",Avenir,"Century Gothic",Futura,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --curve:cubic-bezier(.2,.8,.2,1); /* the shared curve — quick to arrive, soft to settle */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--carbon);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}

a{color:inherit;text-decoration:none;}
::selection{background:var(--paper);color:var(--carbon);}

/* --------------------------------------------------------------------------
   Labels — v1.5 weighted lead:
   the name/lead in demibold ink, the metadata after it in Fog. Sentence case.
   -------------------------------------------------------------------------- */
.lbl{font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--fog);}
.lbl-lead{font-weight:600;color:var(--paper);}          /* lead on dark  */
.on-paper .lbl{color:var(--fog-light);}
.on-paper .lbl-lead{color:var(--carbon);}

/* --------------------------------------------------------------------------
   Type scale — Demibold speaks, Regular explains, Medium labels.
   Everything sentence case; the wordmark is the only caps object.
   -------------------------------------------------------------------------- */
.display{font-weight:600;font-size:clamp(38px,5.6vw,68px);line-height:1.12;letter-spacing:-.015em;}
.display-sm{font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.18;letter-spacing:-.015em;}
h2.headline{font-weight:600;font-size:clamp(21px,2.4vw,27px);line-height:1.3;letter-spacing:-.01em;}
.body{font-weight:400;font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:620px;}
.body b,.body strong{color:var(--paper);font-weight:600;}
.on-paper .body{color:var(--slate);}
.on-paper .body b,.on-paper .body strong{color:var(--carbon);}

/* The wordmark — the big stack. Always caps, never one line. */
.stack{font-weight:700;line-height:1.08;letter-spacing:.03em;}

/* --------------------------------------------------------------------------
   The rule — 3px ink underline, one per surface.
   Draws in once, 700ms, left to right. Solid if motion is reduced.
   -------------------------------------------------------------------------- */
.rule-em{position:relative;white-space:nowrap;}
.rule-em::after{
  content:"";position:absolute;left:0;bottom:-.1em;height:3px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--curve);
}
.rule-em.is-drawn::after{transform:scaleX(1);}

/* --------------------------------------------------------------------------
   The breath — hold screens / web heroes only. Block eases 1 → .45 → 1, 4.5s.
   The only continuous motion in the system.
   -------------------------------------------------------------------------- */
.cursor{
  display:inline-block;width:.5em;height:.92em;background:currentColor;
  vertical-align:-.06em;margin-left:.08em;
  animation:breathe 4.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:1;}50%{opacity:.45;}}

/* --------------------------------------------------------------------------
   The build — the ident. Plays once on site first load (home hero). Never repeats.
   -------------------------------------------------------------------------- */
.ident .seg{stroke-dasharray:60;stroke-dashoffset:60;}
.ident .seg1{animation:draw .55s var(--curve) .15s forwards;}
.ident .seg2{animation:draw .55s var(--curve) .75s forwards;}
.ident .seg3{animation:draw .55s var(--curve) 1.35s forwards;}
.ident .blk{opacity:0;transform:translateX(8px);animation:blockin .5s var(--curve) 2s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes blockin{to{opacity:1;transform:translateX(0);}}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
header{border-bottom:1px solid var(--hairline);}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:22px 0;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand .stack{font-size:11.5px;}
.nav-links{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.nav-links a{
  font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--fog);
  transition:color .25s var(--curve);
}
.nav-links a:hover{color:var(--paper);}
.nav-links a.active{color:var(--paper);font-weight:600;}
.btn{
  display:inline-block;font-weight:600;font-size:13.5px;letter-spacing:.02em;
  padding:12px 22px;border:1px solid var(--paper);color:var(--paper);
  transition:background .25s var(--curve),color .25s var(--curve);
}
.btn:hover{background:var(--paper);color:var(--carbon);}
.btn-solid{background:var(--paper);color:var(--carbon);}
.btn-solid:hover{background:transparent;color:var(--paper);}
/* buttons on paper grounds */
.on-paper .btn{border-color:var(--carbon);color:var(--carbon);}
.on-paper .btn:hover{background:var(--carbon);color:var(--paper);}
.on-paper .btn-solid{background:var(--carbon);color:var(--paper);}
.on-paper .btn-solid:hover{background:transparent;color:var(--carbon);}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section{padding:96px 0;}
section + section{border-top:1px solid var(--hairline);}
.on-paper{background:var(--paper);color:var(--carbon);}
.on-paper + section{border-top:none;}
.kicker{display:block;margin-bottom:20px;}

.hero{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:110px 0;}
.hero .lede{margin-top:30px;}
.hero-actions{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap;}

.lede{font-weight:400;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:560px;}
.on-paper .lede{color:var(--slate);}

/* Two-column head: heading left, body right */
.cols{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;}
@media(max-width:820px){.cols{grid-template-columns:1fr;gap:24px;}}

/* The three conditions */
.conditions{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--hairline);}
.on-paper .conditions{border-color:var(--hairline-light);}
.condition{padding:36px 32px 8px 0;border-right:1px solid var(--hairline);margin-right:32px;}
.condition:last-child{border-right:none;margin-right:0;}
.on-paper .condition{border-color:var(--hairline-light);}
.condition .num{font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--fog);}
.on-paper .condition .num{color:var(--fog-light);}
.condition h3{font-weight:600;font-size:24px;margin:14px 0 4px;letter-spacing:-.01em;}
.condition .q{font-weight:600;font-size:15px;color:var(--fog);margin-bottom:14px;}
.on-paper .condition .q{color:var(--fog-light);}
.condition p{font-size:14.5px;line-height:1.65;color:var(--ink-mute);}
.on-paper .condition p{color:var(--slate);}
@media(max-width:820px){
  .conditions{grid-template-columns:1fr;}
  .condition{border-right:none;margin-right:0;border-bottom:1px solid var(--hairline);padding:28px 0;}
  .condition:last-child{border-bottom:none;}
  .on-paper .condition{border-color:var(--hairline-light);}
}

/* Detail rows (formats, enquiry details) */
.rows{margin-top:48px;border-top:1px solid var(--hairline);}
.on-paper .rows{border-color:var(--hairline-light);}
.row{
  display:grid;grid-template-columns:220px 1fr;gap:28px;
  padding:26px 0;border-bottom:1px solid var(--hairline);
}
.on-paper .row{border-color:var(--hairline-light);}
.row h3{font-weight:600;font-size:17px;letter-spacing:-.01em;}
.row p{font-size:15px;color:var(--ink-mute);max-width:560px;}
.on-paper .row p{color:var(--slate);}
@media(max-width:680px){.row{grid-template-columns:1fr;gap:8px;}}

/* Big statement (the belief) */
/* De-emphasis by weight, never colour — the guidelines' statement-tile pattern */
.statement{font-weight:600;font-size:clamp(26px,3.6vw,42px);line-height:1.25;letter-spacing:-.015em;max-width:820px;}
.statement .soft{font-weight:400;}

/* Photo placeholder — texture carries warmth; swap for real rooms, generous grain */
.photo-ph{
  background:var(--slate);min-height:420px;display:flex;align-items:flex-end;padding:20px;
}
.photo-ph span{font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--carbon);opacity:.75;}

/* CTA band — the inversion is the accent; one per page, where the point lands */
.cta-band{padding:110px 0;}
.cta-band .display-sm{max-width:700px;}
.cta-band .lede{margin-top:22px;}
.cta-band .btn{margin-top:40px;}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer{border-top:1px solid var(--hairline);padding:56px 0 64px;}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;}
.foot-links a{font-weight:500;font-size:12px;letter-spacing:.03em;color:var(--fog);transition:color .25s var(--curve);}
.foot-links a:hover{color:var(--paper);}
.foot-base{margin-top:44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* --------------------------------------------------------------------------
   Reduced motion — print/static: everything solid and still
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .rule-em::after{transform:scaleX(1);}
  .ident .seg{stroke-dashoffset:0;}
  .ident .blk{opacity:1;transform:none;}
  .cursor{animation:none;}
}

/* Four-up variant of the conditions grid (keynote takeaways) */
.conditions-4{grid-template-columns:repeat(4,1fr);}
.conditions-4 .condition h3{font-size:21px;}
@media(max-width:960px){
  .conditions-4{grid-template-columns:repeat(2,1fr);}
  .conditions-4 .condition:nth-child(2){border-right:none;}
}
@media(max-width:820px){
  .conditions-4{grid-template-columns:1fr;}
  .conditions-4 .condition{border-right:none;margin-right:0;}
}

/* Photography — always monochrome; the grayscale filter guards the rule
   even if a colour image is ever swapped in */
.photo{display:block;width:100%;height:auto;filter:grayscale(1);}

/* ==========================================================================
   v1.6 motion (adopted 17 Jul) — the arrival, the field (hero holds only),
   and icon draw-in. All on the shared curve; all still under reduced motion.
   ========================================================================== */

/* The ratchet — site-wide pixel layer: blocks advance one notch per scroll.
   Paper ink on Carbon; they vanish into Paper inversions by design. */
.ratchet-layer{position:fixed;inset:0;z-index:0;pointer-events:none;}
.ratchet-layer span{position:absolute;top:0;background:var(--paper);transition:transform .6s var(--curve);}
.ratchet-layer span:nth-child(1){left:4%;  width:10px;height:10px;opacity:.10;}
.ratchet-layer span:nth-child(2){left:13%; width:8px; height:8px; opacity:.06;}
.ratchet-layer span:nth-child(3){left:24%; width:12px;height:12px;opacity:.12;}
.ratchet-layer span:nth-child(4){left:36%; width:9px; height:9px; opacity:.07;}
.ratchet-layer span:nth-child(5){left:49%; width:11px;height:11px;opacity:.09;}
.ratchet-layer span:nth-child(6){left:61%; width:8px; height:8px; opacity:.05;}
.ratchet-layer span:nth-child(7){left:72%; width:13px;height:13px;opacity:.11;}
.ratchet-layer span:nth-child(8){left:83%; width:9px; height:9px; opacity:.07;}
.ratchet-layer span:nth-child(9){left:91%; width:10px;height:10px;opacity:.08;}
.ratchet-layer span:nth-child(10){left:97%;width:8px; height:8px; opacity:.06;}
header,main,footer{position:relative;z-index:1;}

/* The field — retained for pre-keynote hold screens only (not used on web pages) */
.hero{position:relative;overflow:hidden;}
.hero > .wrap{position:relative;z-index:2;}
.field{position:absolute;inset:0;z-index:1;pointer-events:none;}
.field span{position:absolute;top:-3%;background:var(--paper);animation:fieldfall linear infinite;}
@keyframes fieldfall{from{transform:translateY(-24px);}to{transform:translateY(105vh);}}
.field span:nth-child(1){left:6%;  width:10px;height:10px;opacity:.10;animation-duration:16s;animation-delay:-3s;}
.field span:nth-child(2){left:15%; width:8px; height:8px; opacity:.06;animation-duration:22s;animation-delay:-11s;}
.field span:nth-child(3){left:27%; width:12px;height:12px;opacity:.12;animation-duration:14s;animation-delay:-6s;}
.field span:nth-child(4){left:41%; width:9px; height:9px; opacity:.07;animation-duration:19s;animation-delay:-15s;}
.field span:nth-child(5){left:55%; width:11px;height:11px;opacity:.09;animation-duration:17s;animation-delay:-1s;}
.field span:nth-child(6){left:66%; width:8px; height:8px; opacity:.05;animation-duration:23s;animation-delay:-9s;}
.field span:nth-child(7){left:78%; width:13px;height:13px;opacity:.11;animation-duration:15s;animation-delay:-12s;}
.field span:nth-child(8){left:88%; width:9px; height:9px; opacity:.07;animation-duration:20s;animation-delay:-5s;}
.field span:nth-child(9){left:95%; width:10px;height:10px;opacity:.08;animation-duration:18s;animation-delay:-14s;}

/* The arrival — one block falls from above the fold and becomes the cursor */
.cursor.arrive{position:relative;opacity:0;animation:arrivein .01s linear 2.35s forwards,breathe 4.5s ease-in-out 2.35s infinite;}
@keyframes arrivein{to{opacity:1;}}
.cursor.arrive::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--paper);
  transform:translateY(-65vh);
  animation:arrivefall 2.2s var(--curve) .15s forwards,arrivehide .01s linear 2.35s forwards;
}
@keyframes arrivefall{to{transform:translateY(0);}}
@keyframes arrivehide{to{opacity:0;}}

/* Icon draw-in — icons are built from segment and block, draw once, never loop */
.ic .seg{stroke-dasharray:240;stroke-dashoffset:240;}
.ic .blk{opacity:0;transform:translate(6px,0);}
.ic.go .seg{animation:icdraw .5s var(--curve) forwards;}
.ic.go .seg.s2{animation-delay:.15s;}
.ic.go .blk{animation:icblock .35s var(--curve) .5s forwards;}
.ic.go .blk.d0{animation-delay:.1s;}
.ic.go .blk.d1{animation-delay:.3s;}
.ic.go .blk.d2{animation-delay:.55s;}
@keyframes icdraw{to{stroke-dashoffset:0;}}
@keyframes icblock{to{opacity:1;transform:translate(0,0);}}
h3.with-icon{display:flex;align-items:center;gap:12px;}
.condition .ic{display:block;margin-top:16px;}

@media(prefers-reduced-motion:reduce){
  .field{display:none;}
  .ratchet-layer span{transition:none;}
  .cursor.arrive{opacity:1;animation:none;}
  .cursor.arrive::after{display:none;}
  .ic .seg{stroke-dashoffset:0;}
  .ic .blk{opacity:1;transform:none;}
}

/* Home speaker tile */
.speaker-photo{max-width:300px;width:100%;}