/* Creation Dynamix 2026 front page layer. Loads after brand.css and uses the tokens from styles.css. */

.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}

/* Buttons */
.btn-solid,.btn-line{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:0 22px;font:500 12px/1 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em;transition:background .3s,color .3s,border-color .3s}
.btn-solid{background:var(--orange);border:1px solid var(--orange);color:#080909}
.btn-solid:hover{background:var(--white);border-color:var(--white)}
.btn-line{border:1px solid #676b68;color:var(--white);background:transparent}
.btn-line:hover{background:var(--white);border-color:var(--white);color:#080909}
.btn-solid span,.btn-line span{font-size:15px}

/* Hero */
.hero h1{font-size:clamp(60px,7.6vw,128px);line-height:.86}
.hero h1 em{display:inline-block;margin-top:.04em}
.hero-copy{max-width:560px;margin:0 0 10px 25%}
.hero-copy>p{color:#b7bbb6;font-size:16px;line-height:1.65;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* Hero eyebrow: mobile-hardening.css gives body overflow-wrap:anywhere, which the eyebrow inherits and which
   broke "Cape Town" inside the word on phones. A value set on the element itself always beats an inherited one. */
.hero>.eyebrow{overflow-wrap:normal}

/* Hero above 760px: the heading scales with the window width, so in a wide but short window it ran into the
   absolutely positioned .hero-bottom. Here .hero-bottom is in normal flow: the hero is still at least the window
   height and margin-top:auto keeps the copy and buttons at its bottom, but a short window now makes the hero grow.
   48px is the smallest gap, as on phones. Flex items do not collapse margins, so the eyebrow's bottom margin is
   zeroed to keep the heading where the 40px h1 margin put it before. Short landscape screens (height 520px and
   below) keep their own rule in mobile-hardening.css, which this query leaves out. */
@media (width > 760px) and (height > 520px){
.hero{display:flex;flex-direction:column;height:auto;padding-bottom:55px}
.hero>.eyebrow{margin-bottom:0}
.hero h1{margin-bottom:48px}
.hero-bottom{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto}
}

/* Motion & video: the brand reel in a phone shaped frame, bordered like .case-browser. The stage keeps its grid
   column but drops the 16:10 box, border and scanline overlay that belonged to the old animated frames. This is
   scoped to .reel-stage so an older cached homepage, which still has the animated frames, keeps its 16:10 stage.
   The caption keeps the stage's mono label style from motion.css, but sits under the frame instead of over it.
   The button is hidden in the HTML and shown by script.js, so it never appears without the script that runs it.
   Its focus ring is the site wide :focus-visible ring from brand.css. */
.reel-stage{aspect-ratio:auto;background:none;border:0;overflow:visible}
.reel-stage:after{content:none}
.reel{position:relative;width:min(360px,100%);aspect-ratio:9/16;margin:0 auto;background:#151818;border:1px solid #2c3130;border-radius:10px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.reel-video{display:block;width:100%;height:100%;object-fit:cover}
.reel-toggle{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(8,9,9,.62);color:var(--white);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.reel-toggle:hover{background:var(--orange);border-color:var(--orange);color:#080909}
.reel-toggle[hidden]{display:none}
.reel-toggle svg{width:18px;height:18px;fill:currentColor}
.reel-icon-pause,.reel.is-playing .reel-icon-play{display:none}
.reel.is-playing .reel-icon-pause{display:block}
.motion-stage>.reel-caption{position:static;width:min(360px,100%);margin:16px auto 0}

/* Selected work */
.cases{display:grid;gap:clamp(80px,9vw,130px)}
.case{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.case:nth-child(even) .case-media{order:2}
.case-media{position:relative;padding:0 7% 56px 0}
.case-browser{background:#151818;border:1px solid #2c3130;border-radius:10px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.case-browser-bar{height:32px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#0b0d0d;border-bottom:1px solid #2c3130}
.case-browser-bar i{width:7px;height:7px;border-radius:50%;background:#3a3f3d}
.case-browser-bar span{margin-left:12px;font:10px 'DM Mono',monospace;letter-spacing:.06em;color:#7d827e}
.case picture{display:block}
.case-browser img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.case-map{aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#2c3130}
.case-map>div{background:radial-gradient(circle at 85% 15%,rgba(255,106,0,.12) 0,transparent 55%),#111414;padding:clamp(16px,2.4vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.case-map b{font-size:clamp(17px,1.9vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.case-map span{font:10px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#8b908b}
.case-map>div:nth-child(4) b{color:var(--orange)}
.case-label{font:500 11px/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--orange);margin:0 0 22px}
.case h3{font-size:clamp(34px,3.6vw,56px);letter-spacing:-.05em;line-height:1;margin:0 0 18px;font-weight:500}
.case-summary{color:#c9ccc7;font-size:17px;line-height:1.65;margin:0 0 24px}
.case-points{list-style:none;padding:0;margin:0 0 30px}
.case-points li{padding:11px 0 11px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.55;position:relative}
.case-points li:before{content:"+";position:absolute;left:2px;color:var(--orange)}
.case-link{display:inline-flex;align-items:center;gap:22px;min-height:44px;border-top:1px solid #555;padding-top:4px;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em}
.case-link:hover{color:var(--orange)}

/* Business Suite */
.suite{margin-top:70px;background:#0d0f0f;color:var(--white);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);padding:clamp(30px,5vw,64px);border-top:4px solid var(--orange)}
.services .suite .eyebrow{color:#c7cac4;display:flex;align-items:center;gap:15px;margin:0}
.suite h3{font-size:clamp(34px,4vw,60px);letter-spacing:-.055em;line-height:.98;margin:26px 0 0;font-weight:400}
.suite h3 em{font-family:Georgia,serif;font-weight:400;color:var(--orange)}
.suite-price{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 22px;margin:40px 0 0}
.suite-price b{font-family:Georgia,serif;font-weight:400;font-size:clamp(72px,8vw,128px);line-height:.8;letter-spacing:-.04em;color:var(--orange)}
.suite-price span{display:flex;flex-direction:column;gap:6px;padding-bottom:4px;font-size:14px;line-height:1.4;color:#c9ccc7;max-width:230px}
.suite-price strong{font-size:20px;color:var(--white)}
.suite-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.suite-list li{border-top:1px solid var(--line);padding:13px 0 13px 22px;position:relative;font-size:15px;line-height:1.4}
.suite-list li:before{content:"+";position:absolute;left:2px;color:var(--orange)}
.suite-note{color:var(--muted);font-size:14px;line-height:1.65;margin:22px 0 28px}

/* CV tiers, inside the cv-promo section */
/* Old links to #cv-builder land here. Taken out of the grid so it does not use a cell. */
#cv-builder{position:absolute;top:0;left:0}
.cv-tiers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,4vw,60px)}
.cv-tier{background:#111414;border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column}
.tier-kicker{font:500 10px/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:#8b908b;margin:0}
.cv-tier h3{font-size:24px;letter-spacing:-.03em;line-height:1.15;margin:16px 0 20px;font-weight:600}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 18px}
.tier-price b{font-family:Georgia,serif;font-weight:400;font-size:46px;line-height:1;letter-spacing:-.03em;color:var(--orange)}
.tier-price span{color:#c9ccc7;font-size:14px}
.tier-text{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 16px}
.tier-note{font:500 11px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--white);border-left:2px solid var(--orange);padding-left:12px;margin:0 0 24px}
.cv-tier .btn-solid,.cv-tier .btn-line{margin-top:auto}
.cv-tiers-line{grid-column:1/-1;color:#b7bbb6;font-size:15px;line-height:1.65;max-width:780px;margin:10px 0 0}

/* AI, used properly */
.ai-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ai-examples article{border:1px solid var(--line);background:#0d1010;padding:30px;display:flex;flex-direction:column}
.ai-examples span{font:10px 'DM Mono',monospace;color:var(--orange)}
.ai-examples h3{font-size:24px;letter-spacing:-.03em;margin:26px 0 12px}
.ai-examples p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 24px}
.ai-examples a{margin-top:auto;display:flex;justify-content:space-between;align-items:center;min-height:44px;border-top:1px solid #555;font:11px 'DM Mono',monospace;text-transform:uppercase}
.ai-examples a:hover{color:var(--orange)}

/* Studio: the years line under the heading. Specific enough to beat .studio-copy>p:not(.eyebrow):not(.lead) in styles.css. */
.studio-copy>p.studio-years:not(.eyebrow):not(.lead){font:500 12px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);margin:30px 0 0}

/* Contact heading: the em was orange on the orange section and could not be seen */
.contact h2 em{color:#0b0c0c}

/* Contact form: the job field shown for Human Expert CV requests */
.field-help{margin:6px 0 0;font-size:12px;line-height:1.5;color:#666}
.field[hidden]{display:none}

@media(max-width:980px){
.cv-tiers{grid-template-columns:1fr}
}
@media(max-width:900px){
.hero-copy{margin-left:0;max-width:min(560px,62%)}
.case{grid-template-columns:1fr}
.case:nth-child(even) .case-media{order:0}
.suite{grid-template-columns:1fr}
}
@media(max-width:760px){
.hero{height:auto;min-height:0;padding-bottom:60px}
.hero-bottom{position:relative;left:auto;right:auto;bottom:auto;margin-top:48px;display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.hero-copy{max-width:none;margin:0}
.hero-copy>p{font-size:15px}
.ai-examples{grid-template-columns:1fr}
.case-media{padding-bottom:44px}
.reel,.motion-stage>.reel-caption{width:min(320px,100%)}
}
@media(max-width:480px){
.hero h1{font-size:clamp(40px,11.6vw,54px)}
.hero-actions{display:grid;width:100%}
.suite-list{grid-template-columns:1fr}
.cv-tier{padding:26px 22px}
.case-map b{font-size:16px}
.case-map span{font-size:9px}
}