*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0A0A0A;--bg2:#111111;--bg3:#161616;
  /* --ink3 is the faintest text tier (meta labels, eyebrows, captions). Lifted
     from #5A5A55 (2.86:1 — failed WCAG AA) to #7C7C76 (~4.8:1) so every label
     that uses it clears AA while staying clearly the quietest step of the ramp. */
  --ink:#F5F5F0;--ink2:#A0A09A;--ink3:#7C7C76;
  --accent:#8B9E6E;--accent2:#6B7E52;
  --border:rgba(245,245,240,.07);
  /* Type roles. --fd = display (headings, titles, wordmark), --fu = UI/body.
     The whole site is Montserrat now — both roles resolve from theme.json's
     font-family presets (self-hosted Montserrat woff2, loaded once) so the family
     lives in ONE place and the Site Editor's Font Library can manage it. The
     Customizer "Typography" section (inc/customizer.php) overrides these two vars
     inline on wp_head when the owner picks a different pair. Literal fallbacks
     keep the cascade sane if a preset is ever absent (e.g. a stripped editor). */
  --fd:var(--wp--preset--font-family--display,'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif);
  --fu:var(--wp--preset--font-family--ui,'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif);

  /* ---- Layout scale ---------------------------------------------------
     One content column and one vertical rhythm for the whole site. Every
     band on every template resolves to these four numbers; nothing declares
     a page width of its own. See "ONE CONTENT COLUMN" below for how they
     are applied, and change the measure HERE, once, not per section. */
  --cw:1200px;    /* content width — the measure every band shares */
  --gut:56px;     /* page gutter, outside the column */
  --sp:140px;     /* vertical padding of a normal section */
  --sp-t:200px;   /* … of the first band on a page, which clears the fixed nav */
}
@media(max-width:1024px){:root{--gut:32px;--sp:100px;--sp-t:164px}}
@media(max-width:640px){:root{--gut:20px;--sp:72px;--sp-t:132px}}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
/* WordPress admin bar kompenzacija (vidljivo samo ulogiranima) */
body.admin-bar #nav{top:32px}
@media(max-width:782px){body.admin-bar #nav{top:46px}}
/* …and below 600px WordPress switches #wpadminbar from position:fixed to
   position:absolute so it scrolls away. Measured at 390px: the bar then lays
   out below html's 46px margin, occupying y 46–92, i.e. exactly on top of the
   fixed nav at top:46px — and at z-index 99999 against the nav's 1000 it wins,
   so elementFromPoint over the hamburger returns the admin-bar avatar and the
   mobile menu cannot be opened at all. A larger `top` cannot fix it: the bar
   scrolls and the nav does not, so any fixed offset is wrong at some scroll
   position. Pin the bar instead, which is what it already does at every other
   width. Logged-in users only; visitors never see either rule. */
@media(max-width:600px){body.admin-bar #wpadminbar{position:fixed}}
body{background:var(--bg);color:var(--ink);font-family:var(--fu);font-size:16px;line-height:1.6;overflow-x:hidden}
/* No underlines anywhere by default. Every link in this design is either chrome
   (nav, pills, breadcrumbs, card titles) or already carries its own affordance —
   a bottom border (.btn-g, .sv-open, .ct-lk) or a colour shift on hover. The one
   place an underline-equivalent is REQUIRED is prose, where a link has no other
   context to mark it: .ws-content a keeps its accent border-bottom further down. */
a{text-decoration:none}

/* ============================================================ LOADER */
/* Intro loader — a self-drawing camera-lens iris (markup in inc/chrome.php,
   orchestration in main.js). The animations run on load; the cover fades once
   main.js adds .hidden. Under prefers-reduced-motion the block near the foot of
   this file neutralises every keyframe and main.js hides it outright. */
#loader{position:fixed;inset:0;background:var(--bg);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .7s ease,visibility .7s ease}
#loader.hidden{opacity:0;visibility:hidden}
/* The lens holds — rings drawn, wordmark orbiting, dot pulsing — until main.js
   decides the page is ready and adds .ld-go, which scales it open. It does NOT
   auto-open on a timer, so on a slow network it stays up while things load. */
.ld-iris{width:min(72vmin,340px);height:min(72vmin,340px)}
#loader.ld-go .ld-iris{animation:ldOpen .78s cubic-bezier(.7,0,.2,1) forwards}
.ld-svg{width:100%;height:100%;display:block;overflow:visible}
.ld-c{fill:none;stroke-linecap:round}
.ld-c1{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:942;stroke-dashoffset:942;animation:ldDraw 1.5s cubic-bezier(.65,0,.35,1) .1s forwards}
.ld-c2{stroke:rgba(245,245,240,.5);stroke-width:1;stroke-dasharray:704;stroke-dashoffset:704;animation:ldDraw 1.4s cubic-bezier(.65,0,.35,1) .32s forwards}
.ld-c3{stroke:rgba(245,245,240,.26);stroke-width:1;stroke-dasharray:465;stroke-dashoffset:465;animation:ldDraw 1.3s cubic-bezier(.65,0,.35,1) .52s forwards}
.ld-ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:ldSpin 15s linear infinite,ldFade .9s ease .5s forwards}
.ld-ring-text{font-family:var(--fd);font-weight:600;font-size:13px;text-transform:uppercase;fill:var(--accent)}
.ld-dot{fill:var(--accent);transform-box:fill-box;transform-origin:center;opacity:0;animation:ldPulse 2.4s ease-in-out .4s infinite,ldFade .8s ease .4s forwards}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldFade{to{opacity:1}}
@keyframes ldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.9)}}
@keyframes ldOpen{from{transform:scale(1);opacity:1}to{transform:scale(2.7);opacity:0}}

/* ============================================================ NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding-block:22px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,10,10,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:padding .4s}
#nav.sc{padding-block:16px}
.nav-logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.nav-logo-mark{width:42px;height:42px;flex:none;display:block;border-radius:50%}
/* Wordmark is uppercased in CSS, not in the markup: chrome.php ships the
   natural-case "Terminus Production" so search engines and screen readers read a
   real brand name, and only the display is caps. "Terminus" is bold, "Production"
   regular — the weight split, not colour, carries the emphasis. */
.nav-logo-text{font-family:var(--fd);font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:color .3s}
.nav-logo-text .nl-strong{font-weight:700}
.nav-logo:hover .nav-logo-text{color:var(--accent)}
@media(max-width:520px){.nav-logo-mark{width:36px;height:36px}.nav-logo-text{font-size:13px;letter-spacing:.1em}}
@media(max-width:360px){.nav-logo-text{display:none}}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{font-family:var(--fd);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-r{display:flex;align-items:center;gap:20px}
.nav-cta{font-family:var(--fd);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);background:var(--accent);padding:11px 26px;text-decoration:none;transition:background .3s}
.nav-cta:hover{background:var(--accent2)}
/* Real <button> since inc/chrome.php stopped rendering it as a div; the UA
   button chrome is reset so the three bars look exactly as they always did. */
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:0;color:inherit;font:inherit;appearance:none;-webkit-appearance:none}
.ham span{display:block;width:24px;height:1px;background:var(--ink);transition:transform .3s,opacity .3s}
.mob-nav{display:none;position:fixed;inset:0;background:var(--bg);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:40px}
.mob-nav.open{display:flex}
.mob-nav a{font-family:var(--fd);font-size:clamp(24px,6vw,34px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .3s}
.mob-nav a:hover{color:var(--accent)}

/* ============================================================ A11Y UTILITIES */
/* WordPress core's visually-hidden utility, verbatim: text stays in the
   accessibility tree and in the markup for crawlers, but off-screen. Used by
   blocks/hero/render.php when the headline is toggled off. */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#ddd;clip:auto!important;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
/* WordPress injects its own skip link immediately before div.wp-site-blocks —
   i.e. AFTER the whole of inc/chrome.php's nav — so it is only reachable once
   the user has already tabbed past everything it was meant to skip. The theme
   emits an identically-targeted one as the first focusable element in the body
   (see terminus_render_top_chrome()); core's is suppressed as a duplicate. */
#wp-skip-link{display:none}

/* Focus visibility. With the native pointer hidden and a #0A0A0A palette the
   browser's default ring is close to invisible, so every interactive element
   gets an explicit one. :focus-visible fires only for keyboard/AT focus, so a
   mouse user never sees any of this. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Form controls opt out of the UA outline further down (.fg input{outline:none}) — re-arm it. */
.fg input:focus-visible,.fg textarea:focus-visible,.fg select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Media tiles clip their content and sit in tight grids: draw the ring inside. */
.wi:focus-visible,.ws-slide:focus-visible,.sv-thumb:focus-visible,.sv-arow-vis:focus-visible{outline-offset:-4px}
/* Affordances that only exist on hover must also appear on keyboard focus,
   otherwise the ring lands on something the user cannot see. */
.wi:focus-visible .wplay{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ws-arrow:focus-visible{opacity:1}

/* ============================================================ HERO */
#hero{position:relative;width:100%;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-vw{position:absolute;inset:0}
.hero-vw img,.hero-vw video{width:100%;height:100%;object-fit:cover;display:block}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.1) 0%,rgba(10,10,10,0) 35%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.92) 100%)}
.hero-c{position:relative;z-index:2;padding-block:0 80px;width:100%}
.hero-ey{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;opacity:0;transform:translateY(18px);transition:opacity .8s .2s,transform .8s .2s}
.hero-h{font-family:var(--fd);font-size:clamp(54px,9vw,128px);font-weight:300;line-height:1;letter-spacing:-.01em;color:var(--ink);margin-bottom:28px;overflow:hidden}
.hero-h-long{font-size:clamp(34px,4.4vw,64px);line-height:1.08;max-width:20ch}
.hero-h .ln{display:block;opacity:0;transform:translateY(105%);transition:opacity .95s,transform .95s cubic-bezier(.16,1,.3,1)}
.hero-h .ln:nth-child(2){transition-delay:.13s}
.hero-h .ln:nth-child(3){transition-delay:.26s}
/* Titles are one solid colour, upright. The emphasis word in a heading is still
   authored as <em> so the copy stays editable, but it must read as part of the
   title — not a coloured italic pull. So every heading <em> is neutralised to
   the title's own colour and an upright face (see .st/.reel-t/.ab-lead/.page-title
   below, kept in sync). */
.hero-h em{font-style:normal;color:inherit}
.hero-sub{font-size:16px;font-weight:400;color:var(--ink2);letter-spacing:.04em;margin-bottom:48px;opacity:0;transform:translateY(18px);transition:opacity .8s .5s,transform .8s .5s}
.hero-acts{display:flex;gap:24px;align-items:center;opacity:0;transform:translateY(18px);transition:opacity .8s .65s,transform .8s .65s}
.btn-p{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:var(--ink);padding:17px 40px;text-decoration:none;transition:background .3s,transform .2s}
.btn-p:hover{background:var(--accent);transform:translateY(-2px)}
.btn-g{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:17px 0;border-bottom:1px solid var(--border);transition:color .3s}
/* The resting border is --border (7% ink) and all but invisible; on hover it
   takes the text colour so the control reads as a real affordance. */
.btn-g:hover{color:var(--ink);border-bottom-color:currentColor}
.btn-g svg{transition:transform .3s}
.btn-g:hover svg{transform:translateX(4px)}
body.loaded .hero-ey,body.loaded .hero-sub,body.loaded .hero-acts{opacity:1;transform:translateY(0)}
body.loaded .hero-h .ln{opacity:1;transform:translateY(0)}

/* ============================================================ ONE CONTENT COLUMN

   Every band on every template lands on the same measure: --cw wide, centred,
   with --gut of gutter outside it. There are exactly two shapes.

   (a) THE ELEMENT IS THE BAND. It carries both the cap and the gutter, so its
       max-width is --cw PLUS the two gutters and the content inside lands on
       exactly --cw. Nothing here paints a background, so the padding is free.

   (b) THE BAND PAINTS FULL-BLEED (#about, #contact and the two fixed bars).
       The outer element keeps the gutter so its colour/border runs edge to
       edge, and an inner wrapper carries the cap alone. #nav and footer have
       no inner wrapper in the markup, so they get the same result from
       `max(gutter, half the leftover)`: on a wide screen that resolves to the
       column's own offset and the logo lines up with the content below it; on
       a narrow one it collapses back to the plain gutter.

   Anything that needs to be NARROWER than the column — a text measure, a lead
   paragraph, a caption — does it in `ch` inside the column. It must never be
   another px max-width: a second px width is exactly how this drifted into
   twelve different content widths across five templates. */
.hero-c,#work,.sv,
.ws-head,.ws-body,.ws-more,
.wa-head,.wa-grid,.wa-pag,
.page-hero,.page-cta,.sv-rows{
  max-width:calc(var(--cw) + var(--gut) * 2);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.ab-in,.ct-in,.sdiv{max-width:var(--cw);margin-inline:auto}
/* max-width:none because these two paint a full-bleed background and must reach
   the window edge. On the homepage they already do — front-page.html's <main> is
   layout:default, which caps nothing — but the standalone Studio/Contact pages
   render them inside post-content, whose constrained layout puts contentSize on
   every direct child and was drawing the tint as a centred 1312px box. The
   measure is carried by .ab-in / .ct-in inside, not by the band. */
#about,#contact{max-width:none;padding-inline:var(--gut)}
#nav,#nav.sc,footer{padding-inline:max(var(--gut),(100% - var(--cw)) / 2)}

/* ============================================================ SECTION COMMON */
/* Section eyebrow. The 40px accent rule that used to sit beside the label is
   gone — with most eyebrows removed the remaining one reads better as plain
   type, and .sl-c (the centred, double-ruled variant) has no markup left. */
.sl{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:64px}
.st{font-family:var(--fd);font-size:clamp(36px,5vw,72px);font-weight:300;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.st em{font-style:normal;color:inherit}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
/* First-viewport reveals (class added by reveal() in main.js). The browser will
   not record a contentful paint while an ancestor's opacity is still animating,
   so the .85s fade on the first screen was authoring roughly a second of the
   page's own LCP. Below the fold nothing changes — this modifier is only ever
   applied to elements that are already on screen when the page loads. */
.reveal.tm-lead{transition-duration:.4s}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}

/* ============================================================ WORK */
#work{padding-block:var(--sp)}
.wh{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:80px}
.wc{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.wh-all{align-self:flex-end;white-space:nowrap}
.wg{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.wi{position:relative;overflow:hidden;cursor:pointer;background:var(--bg3);aspect-ratio:4/3}

/* Masonry mosaic (homepage Selected Work).

   Column flow, not a row grid. Each tile is exactly its featured image's own
   aspect ratio: `--wr` is written inline per tile by
   blocks/selected-work/render.php from the attachment's real pixel dimensions,
   so a 4:3 still, a 2:3 portrait and a 2.4:1 panorama each keep their shape and
   nothing is cropped. Heights follow from the artwork instead of from a tile
   size chosen in wp-admin, which is what made the old fixed row spans
   (8px rows, span 34/46/60) drift: a span is a FIXED pixel height while the
   column width tracks the viewport, so the tiles were only ever right at one
   window size and grew steadily more portrait than the images they held.

   Column flow also means the section takes any number of items without a ragged
   last row — the browser balances the columns, so 5 items and 11 items both
   pack solid. The tradeoff is reading order: items fill top-to-bottom down each
   column, not left-to-right across a row. Item #1 is still top-left. */
.wg-masonry{display:block;columns:3;column-gap:14px}
.wg-masonry .wi{display:block;aspect-ratio:var(--wr,4/3);height:auto;margin:0 0 14px;break-inside:avoid}
@media(max-width:1000px){.wg-masonry{columns:2}}
@media(max-width:640px){
  .wg-masonry{columns:1;column-gap:0}
  .wg-masonry .wi{margin-bottom:10px}
}
/* Caption scaled to the tile. The shared .w-info / .wtitle sizes are set for the
   Work archive, whose tiles are ~600px tall; a masonry tile is its image's own
   height, which for a landscape still in a 433px column is ~290-325px and for
   the panoramic ones ~180px. At that size the 34px display title plus 44/28
   padding eats half the tile and two-line titles crowd the edge. */
.wg-masonry .w-info{padding:34px 22px 20px}
.wg-masonry .wcat{margin-bottom:6px}
.wg-masonry .wtitle{font-size:clamp(18px,1.55vw,24px)}
.wt{width:100%;height:100%;object-fit:cover;display:block;transition:transform .85s cubic-bezier(.16,1,.3,1),filter .55s;filter:brightness(.78) contrast(1.02)}
.wi:hover .wt{transform:scale(1.05);filter:brightness(.5)}
/* konzistentan tamni gradient preko svake slike za ujednačen izgled */
.wi::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.15) 0%,transparent 35%,transparent 55%,rgba(10,10,10,.75) 100%);pointer-events:none;z-index:1}
.w-info{position:absolute;bottom:0;left:0;right:0;padding:44px 32px 28px;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,transparent 100%);transform:translateY(6px);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:2}
.wi:hover .w-info{transform:translateY(0)}
.wcat{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.wtitle{font-family:var(--fd);font-size:clamp(20px,2.5vw,34px);font-weight:300;color:var(--ink);letter-spacing:.01em}
.wplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);width:60px;height:60px;background:rgba(245,245,240,.1);backdrop-filter:blur(8px);border:1px solid rgba(245,245,240,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s,transform .3s;color:var(--ink);z-index:2}
.wi:hover .wplay{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ============================================================ REEL */
#reel{overflow:hidden;position:relative;height:58vw;max-height:680px}
.reel-bg{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.55)}
.reel-ov{position:absolute;inset:0;background:rgba(10,10,10,.3);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px}
.reel-t{font-family:var(--fd);font-size:clamp(36px,6.5vw,96px);font-weight:300;color:var(--ink);letter-spacing:-.01em;text-align:center}
.reel-t em{font-style:normal;color:inherit}
.reel-pb{width:80px;height:80px;border:1px solid rgba(245,245,240,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);background:none;transition:background .3s,border-color .3s,transform .3s}
.reel-pb:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.09)}

/* ============================================================ ABOUT */
#about{padding-block:var(--sp);background:var(--bg2)}
.ab-in{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}
.ab-vis{position:relative;max-height:600px;}
/* The studio image is optional (blocks/studio/render.php emits nothing when it
   is unset — the Unsplash fallback is gone) and .ab-vis has no intrinsic
   height of its own, so an unconfigured image collapsed the left column to zero
   and left a lopsided two-column grid. Keep the portrait footprint the image
   would have had. :empty is no use here: the markup always contains whitespace
   (and optionally .ab-tag), so the test is "contains no image". */
.ab-vis:not(:has(img)){aspect-ratio:3/4;background:var(--bg3)}
.ab-img{width:100%;object-fit:cover;filter:brightness(.88)}
/* Studio TEASER image only (the bento and services variants set their own
   height below). It is a portrait source dropped in a ~545px column, so the old
   `aspect-ratio:3/4` made it ~727px tall — and the intrinsic `large` height
   pushed the box to 1024px — while `.ab-vis` capped at 600px WITHOUT clipping, so
   the image (and the "Split — Worldwide" tag riding its corner) overflowed
   hundreds of px into the section below. A bounded frame height + cover-crop
   locks it to the box; `.ab-vis` stays overflow:visible so the tag keeps its 28px
   overhang. clamp() ≈ column height, capped at 600 (well under 2× the copy). */
.ab-in:not(.st-bento) .ab-img{height:clamp(460px,44vw,600px)}
/* Reads as a button and now is one — it links to the Contact page (see
   blocks/studio/render.php; it falls back to a plain div when no Contact page
   is published, hence the shared selector). */
.ab-tag{position:absolute;bottom:-28px;right:-28px;background:var(--accent);color:var(--bg);padding:20px 28px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:inline-block;transition:background .3s,transform .2s}
a.ab-tag:hover{background:var(--accent2);transform:translateY(-2px)}
.ab-lead{font-family:var(--fd);font-size:clamp(22px,2.6vw,36px);font-weight:300;line-height:1.4;color:var(--ink);margin-bottom:28px}
.ab-lead em{font-style:normal;color:inherit}
.ab-body{font-size:16px;font-weight:400;line-height:1.8;color:var(--ink2);margin-bottom:48px}

/* ============================================================ SERVICES — editorial index (inline accordion) */
.sv{padding-block:var(--sp)}
.sv-head{text-align:center;margin-bottom:74px}
.sv-title{font-family:var(--fd);font-weight:300;font-size:clamp(28px,3.4vw,52px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);max-width:16ch;margin:0 auto}

.sv-index{border-top:1px solid var(--border)}
.sv-row{position:relative;border-bottom:1px solid var(--border)}
.sv-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .45s cubic-bezier(.16,1,.3,1)}
.sv-row:hover::before,.sv-row.is-open::before{width:2px}
.sv-item{
  position:relative;width:100%;display:grid;grid-template-columns:1fr 44px;align-items:center;gap:0 28px;
  padding:30px 8px;background:none;border:none;text-align:left;cursor:pointer;color:inherit;
  transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.sv-row:hover .sv-item,.sv-row.is-open .sv-item{padding-left:26px}
.sv-nm{font-family:var(--fd);font-weight:300;font-size:clamp(26px,3.6vw,46px);line-height:1.05;letter-spacing:-.005em;color:var(--ink2);transition:color .4s}
.sv-row:hover .sv-nm,.sv-row.is-open .sv-nm{color:var(--ink)}
.sv-go{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink3);justify-self:end;transition:border-color .4s,color .4s}
.sv-go svg{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sv-row:hover .sv-go{border-color:var(--accent);color:var(--accent)}
.sv-row.is-open .sv-go{border-color:var(--accent);color:var(--accent)}
.sv-row.is-open .sv-go svg{transform:rotate(90deg)}

/* Inline expanding panel — short text, thumbnails, link to the full category.
   max-height:0 + overflow:hidden hides the panel visually but leaves its links
   in the tab order and in the accessibility tree, so a keyboard user used to
   fall into three invisible links per collapsed row. visibility:hidden fixes
   both; the 0s-duration/.55s-delay transition means it only takes effect once
   the collapse animation has finished, so the motion is unchanged. */
.sv-panel{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .55s cubic-bezier(.16,1,.3,1),visibility 0s .55s}
.sv-row.is-open .sv-panel{visibility:visible;transition:max-height .55s cubic-bezier(.16,1,.3,1),visibility 0s 0s}
.sv-panel-in{padding:4px 8px 46px 88px;display:flex;flex-direction:column;gap:26px;max-width:1000px}
.sv-desc{font-family:var(--fu);font-weight:400;font-size:16px;line-height:1.8;color:var(--ink2);max-width:62ch;margin:0}
.sv-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sv-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg3);display:block}
.sv-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.sv-thumb:hover img{transform:scale(1.05)}
.sv-open{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:var(--fu);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:5px;transition:color .3s}
.sv-open:hover{color:var(--accent)}
.sv-open svg{transition:transform .3s}
.sv-open:hover svg{transform:translateX(4px)}

.sv-more{text-align:center;margin-top:52px}
.sv-more .btn-g{display:inline-flex;border-bottom-color:var(--accent)}

/* Inline video player (plays in the box — no modal) */
.tm-inline-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:6;background:#000}
#reel .reel-ov,#reel .reel-bg{transition:opacity .5s ease}
#reel.is-playing .reel-ov,#reel.is-playing .reel-bg{opacity:0;pointer-events:none}

/* ============================================================ CONTACT */
#contact{padding-block:var(--sp);background:var(--bg2)}
.ct-in{display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:start}
.ct-tl{font-size:16px;font-weight:400;color:var(--ink2);line-height:1.75;margin-bottom:52px;max-width:380px}
.ct-links{display:flex;flex-direction:column}
.ct-lk{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:400;letter-spacing:.06em;color:var(--ink2);text-decoration:none;transition:color .3s;padding:18px 0;border-bottom:1px solid var(--border)}
.ct-lk:hover{color:var(--ink)}
.ct-lk svg{color:var(--accent);flex-shrink:0}
.ct-form{display:flex;flex-direction:column;gap:20px}
.fg{display:flex;flex-direction:column;gap:8px}
.fg label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--ink2);opacity:1}
.fg input,.fg textarea,.fg select{background:var(--bg3);border:1px solid var(--border);color:var(--ink);font-family:var(--fu);font-size:16px;font-weight:400;padding:22px 22px;outline:none;transition:border-color .3s;resize:none;appearance:none;-webkit-appearance:none}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--accent)}
.fg select option{background:var(--bg3)}
.f-sub{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:var(--bg);border:none;font-family:var(--fd);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:18px 44px;cursor:pointer;transition:background .3s,transform .2s;margin-top:8px}
.f-sub:hover{background:var(--accent2);transform:translateY(-2px)}

/* ============================================================ FOOTER */
footer{padding-block:52px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}
.fl{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.fl span{color:var(--accent)}
.fc{font-size:12px;font-weight:300;color:var(--ink3)}
.fsc{display:flex;gap:24px}
.fsc a{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);text-decoration:none;transition:color .3s}
.fsc a:hover{color:var(--accent)}
/* The hairline IS its own background, so it cannot take the gutter as padding
   the way the other bands do — it would paint straight through it. Subtract it
   from the width instead, so the rule starts and ends on the content column. */
.sdiv{width:calc(100% - var(--gut) * 2);height:1px;background:var(--border)}
/* The Studio page's trailing hairline is a core/separator carrying .sdiv (see
   patterns/studio-approach.php) rather than an empty Group, which the editor
   drew as a "Group blocks together. Select a layout:" placeholder. Core paints
   its separator with a 2px border-bottom, which would sit under our 1px
   background; strip it. The pattern also sets is-style-wide, without which
   core's `.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}`
   (specificity 0,3,0) would beat .sdiv's width:100%. */
hr.wp-block-separator.sdiv{border:0;opacity:1}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent)}

/* ============================================================ RESPONSIVE
   Horizontal gutters and section rhythm are NOT repeated here — they come from
   --gut / --sp / --sp-t, which step down at these same two breakpoints in the
   :root block at the top of the file. What is left below is only what actually
   changes shape at a given width: columns collapsing, chrome swapping, motion
   being dropped. */
@media(max-width:1024px){
  #nav{padding-block:20px}#nav.sc{padding-block:14px}
  .nav-links,.nav-cta{display:none}.ham{display:flex}
  .hero-c{padding-bottom:64px}
  .ab-in{grid-template-columns:1fr;gap:48px}.ab-vis{display:none}
  .sv-item{grid-template-columns:1fr 36px;gap:0 16px}
  .sv-panel-in{padding-left:60px}
  .ct-in{grid-template-columns:1fr;gap:56px}
  footer{padding-block:40px;flex-wrap:wrap;gap:20px}
}
@media(max-width:640px){
  html{overflow-x:hidden;max-width:100%}
  body{overflow-x:hidden;max-width:100%;width:100%;position:relative}
  section,div,header,footer,nav{max-width:100vw}
  #hero{height:100vh;height:100svh;min-height:560px}
  .hero-vw img,.hero-vw video{transform:none!important}
  #nav{padding-block:16px}#nav.sc{padding-block:12px}
  .hero-c{padding-bottom:56px}
  .hero-acts{flex-direction:column;align-items:flex-start;gap:16px}
  .wh{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .wg{grid-template-columns:1fr}
  /* na mobilu SVE work slike (uključujući wide) isti omjer — bez konflikta */
  .wi{aspect-ratio:16/10}
  .sv-item{grid-template-columns:1fr 30px;gap:0 12px;padding:22px 6px}
  .sv-nm{font-size:clamp(22px,7vw,34px)}
  .sv-panel-in{padding:4px 4px 32px 46px}
  .sv-thumbs{grid-template-columns:repeat(2,1fr)}
  #reel{height:80vw}
  footer{padding-block:32px;flex-direction:column;align-items:flex-start;gap:16px}
}

/* =============================================================
   Terminus theme additions — contact actions, focus page, archive
   (matches the existing token system: --bg/--ink/--accent/--fd/--fu)
   ============================================================= */

/* Contact — dual actions + status */
.ct-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.f-wa{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border:1px solid var(--border);background:transparent;color:var(--ink);font-family:var(--fu);font-size:13px;letter-spacing:.06em;cursor:pointer;transition:border-color .3s,background .3s}
.f-wa:hover{border-color:var(--accent);background:rgba(139,158,110,.08)}
.ct-status{min-height:20px;margin-top:14px;font-size:13px;color:var(--ink2);font-family:var(--fu)}
.ct-status.ok{color:var(--accent)}
.ct-status.err{color:#c98b8b}

/* ---- Gravity Forms contact form (inc/gravityforms.php) ------------------------
   GF's orbital theme styles itself with :where() (zero specificity), so these
   scoped rules win and re-skin the plugin form to match .ct-form above: dark
   controls, an upgraded custom-chevron dropdown, and the accent submit sitting in
   one row with the WhatsApp hand-off. */
.ct-form-gf .gform_wrapper{--gf-color-primary:var(--accent);--gf-color-primary-contrast:var(--bg)}
.ct-form-gf .gform_required_legend{display:none}
.ct-form-gf .gform_fields{display:flex;flex-direction:column;gap:20px;grid-row-gap:20px;grid-column-gap:0}
.ct-form-gf .gfield{margin:0;padding:0}
.ct-form-gf .gfield_label{display:block;font-family:var(--fu);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.ct-form-gf .gfield_required{color:var(--accent);margin-left:6px}
.ct-form-gf .gfield_required .gfield_required_text{color:var(--accent);font-size:9px}
.ct-form-gf input[type=text],
.ct-form-gf input[type=email],
.ct-form-gf textarea,
.ct-form-gf select{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--ink);font-family:var(--fu);font-size:16px;font-weight:400;line-height:1.6;padding:22px 22px;outline:none;border-radius:0;box-shadow:none;transition:border-color .3s;resize:none;appearance:none;-webkit-appearance:none}
.ct-form-gf textarea{min-height:170px}
.ct-form-gf input::placeholder,.ct-form-gf textarea::placeholder{color:var(--ink2);opacity:1}
.ct-form-gf input:focus,.ct-form-gf textarea:focus,.ct-form-gf select:focus{border-color:var(--accent);box-shadow:none;background:var(--bg3)}
.ct-form-gf input:focus-visible,.ct-form-gf textarea:focus-visible,.ct-form-gf select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Upgraded dropdown: dark field, on-brand custom chevron, accent focus */
.ct-form-gf select{cursor:pointer;padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23A0A09A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:16px}
.ct-form-gf select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238B9E6E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ct-form-gf select option{background:var(--bg3);color:var(--ink)}
/* Footer: accent submit + WhatsApp share one row (mirrors .ct-actions). GF's
   orbital theme colours its buttons with real class selectors, so the submit and
   the WhatsApp button are forced here to beat it. */
.ct-form-gf .gform_footer{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0 0;padding:0}
.ct-form-gf .gform_footer .gform_button{display:inline-flex;align-items:center;gap:12px;width:auto;background:var(--accent)!important;color:var(--bg)!important;border:none!important;border-radius:0!important;font-family:var(--fd)!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:18px 44px!important;cursor:pointer;box-shadow:none;transition:background .3s,transform .2s}
.ct-form-gf .gform_footer .gform_button:hover{background:var(--accent2)!important;transform:translateY(-2px)}
.ct-form-gf .gform_footer .f-wa{background:transparent!important;color:var(--ink)!important;border:1px solid var(--border)!important;border-radius:0;padding:16px 24px;font-size:13px;letter-spacing:.06em;text-transform:none;font-weight:400}
.ct-form-gf .gform_footer .f-wa:hover{border-color:var(--accent)!important;background:rgba(139,158,110,.08)!important;transform:translateY(-2px)}
/* Validation + confirmation, on-theme */
.ct-form-gf .gfield_validation_message,.ct-form-gf .validation_message{color:#c98b8b;font-size:12px;margin-top:8px;padding:0;background:none;border:none}
.ct-form-gf .gform_validation_errors{background:rgba(201,139,139,.08);border:1px solid rgba(201,139,139,.28);padding:14px 18px;margin-bottom:20px;border-radius:0;box-shadow:none}
.ct-form-gf .gform_validation_errors *{color:#c98b8b}
.ct-form-gf .gform_confirmation_message{font-family:var(--fu);font-size:16px;line-height:1.7;color:var(--accent);padding:10px 0}
.ct-form-gf .gform_validation_container,.ct-form-gf .gfield--type-honeypot{position:absolute!important;left:-9999px!important}

/* -------- Focus page -------- */
.work-single{background:var(--bg);color:var(--ink)}
/* Media viewer: full-bleed 100vw × 86vh band (video + gallery bleed edge to
   edge), with an OUTLINE control bar floating over the top so the controls never
   cover the footage. Title/copy sit below in the content column. */
.ws-media{position:relative;height:86vh;height:86svh;min-height:520px;overflow:hidden;background:var(--bg3)}
/* A slim top scrim so the outline buttons stay legible over a bright frame. */
.ws-media::after{content:'';position:absolute;top:0;left:0;right:0;height:190px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 100%)}
.ws-panes,.ws-pane,.ws-gallery,.ws-frame{height:100%}
.ws-pane[hidden]{display:none}
.ws-slide-img{width:100%;height:100%;object-fit:cover;display:block}

/* Floating outline control bar. z-index sits ABOVE the injected .tm-inline-frame
   (z-index 6) so the tabs and "Close video" stay reachable over a playing film.
   The inline padding is the site's column formula — the same max(gutter, half the
   leftover) #nav and footer use — so the bar's Video edge and Close edge land on
   the 1200px content column, flush with the title and copy below. */
.ws-bar{position:absolute;top:calc(72px + clamp(14px,2vw,24px));left:0;right:0;z-index:7;display:flex;align-items:center;gap:8px;padding-inline:max(var(--gut),(100% - var(--cw)) / 2)}
.ws-tabs{display:flex;gap:8px}
.ws-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(10,10,10,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(245,245,240,.55);padding:11px 24px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.ws-btn:hover{border-color:var(--ink);background:rgba(10,10,10,.4)}
.ws-tab.is-active{color:var(--accent);border-color:var(--accent)}
.ws-close{margin-left:auto;display:none}
.ws-media.is-playing .ws-close{display:inline-flex}

/* Video pane — the still fills the band; the whole band is the play target */
.ws-frame{position:relative}
.ws-video{cursor:pointer}
.ws-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:92px;height:92px;border:1px solid rgba(245,245,240,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:rgba(10,10,10,.25);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2;transition:background .4s,border-color .4s,transform .4s,opacity .4s}
.ws-play svg{margin-left:5px}
.ws-video:hover .ws-play,.ws-video:focus-visible .ws-play{background:var(--accent);border-color:var(--accent);color:var(--bg);transform:translate(-50%,-50%) scale(1.06)}
.ws-video.is-playing .ws-slide-img,.ws-video.is-playing .ws-play{opacity:0;pointer-events:none}

/* Photo gallery — full-bleed scroll-snap slides with prev/next arrows */
.ws-gallery{position:relative}
.ws-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.ws-track::-webkit-scrollbar{display:none}
.ws-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;overflow:hidden;background:var(--bg3)}
.ws-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:52px;height:52px;border-radius:50%;border:1px solid rgba(245,245,240,.5);background:rgba(10,10,10,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;transition:opacity .3s,background .3s,border-color .3s,transform .3s}
.ws-gallery:hover .ws-arrow{opacity:1}
.ws-arrow:hover{background:rgba(10,10,10,.5);border-color:var(--ink)}
.ws-arrow-l{left:clamp(16px,4vw,48px)}.ws-arrow-r{right:clamp(16px,4vw,48px)}
.ws-arrow-l:hover{transform:translateY(-50%) translateX(-3px)}
.ws-arrow-r:hover{transform:translateY(-50%) translateX(3px)}
/* Title block — below the media, in normal flow, left aligned */
.ws-head{padding-top:clamp(30px,4vw,56px)}
.ws-crumb{display:flex;gap:10px;align-items:center;font-family:var(--fu);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);margin-bottom:20px}
.ws-crumb .sep{color:var(--ink3)}
.ws-title{font-family:var(--fd);font-weight:400;font-size:clamp(2.2rem,1.4rem + 4vw,4.6rem);line-height:1.02;margin:0;color:var(--ink)}
.ws-sub{font-family:var(--fu);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-top:16px}

.ws-body{padding-block:clamp(40px,5vw,72px) calc(var(--sp) / 2)}
.ws-meta{display:flex;flex-wrap:wrap;gap:48px;padding-bottom:44px;border-bottom:1px solid var(--border)}
.ws-m{display:flex;flex-direction:column;gap:8px}
.ws-m span{font-family:var(--fu);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.ws-m strong{font-family:var(--fd);font-weight:400;font-size:22px;color:var(--ink)}
.ws-m a{color:var(--ink)}.ws-m a:hover{color:var(--accent)}
.ws-content{margin-top:44px;font-family:var(--fu);font-weight:400;font-size:18px;line-height:1.8;color:var(--ink2);max-width:760px}
/* Editor images inside the content flow full-bleed of the text column */
.ws-content img{max-width:100%;height:auto;display:block;margin:40px 0}
.ws-content figure{margin:40px 0}
.ws-content figure img{margin:0}
.ws-content figcaption{font-size:13px;color:var(--ink3);margin-top:12px;letter-spacing:.02em}
.ws-content h2,.ws-content h3{font-family:var(--fd);font-weight:400;color:var(--ink);line-height:1.15;margin:52px 0 18px}
.ws-content h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem)}
.ws-content h3{font-size:clamp(1.4rem,1rem + 1.4vw,1.9rem)}
.ws-content p{margin:0 0 24px}
.ws-content a{color:var(--ink);border-bottom:1px solid var(--accent);transition:color .3s}
.ws-content a:hover{color:var(--accent)}
.ws-content blockquote{border-left:2px solid var(--accent);padding-left:26px;margin:40px 0;font-family:var(--fd);font-style:italic;font-size:1.5rem;color:var(--ink)}

/* "More work" browse-next — one section of larger cards (replaces prev/next + related) */
/* The rule is drawn as a pseudo-element inset by the gutter rather than as a
   border-top on the section, because a border spans the padding box — it ran
   from 144 to 1456 while the content it divides sits at 200-1399. In-content
   dividers align to the column (same reason .sdiv subtracts the gutter from its
   width); the nav and footer hairlines stay full-bleed, since those separate
   the page from the chrome rather than one band of content from the next. */
.ws-more{position:relative;padding-block:var(--sp)}
.ws-more::before{content:'';position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--border)}
.ws-more-hd{display:flex;align-items:flex-end;justify-content:flex-end;gap:24px;margin-bottom:44px}
.ws-more-hd .btn-g{white-space:nowrap}
.ws-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ws-more-grid .wi{aspect-ratio:4/3}
.ws-more-grid .wtitle{font-size:clamp(18px,1.8vw,26px)}

/* -------- Archive -------- */
.work-archive{padding-top:0}
.wa-head{padding-block:var(--sp-t) calc(var(--sp) / 2)}
/* The archive header IS .page-hero / .page-title now — same centred type as
   Studio, Services and Contact — so only the two archive-only children below
   need centring to match. */
.wa-intro{font-family:var(--fu);font-weight:400;font-size:18px;color:var(--ink2);max-width:60ch;margin:22px auto 0}
.wa-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px}
.wa-chip{padding:9px 20px;border:1px solid var(--border);border-radius:60px;font-family:var(--fu);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);transition:border-color .3s,color .3s,background .3s}
.wa-chip:hover{border-color:var(--accent);color:var(--ink)}
.wa-chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wa-grid{padding-block:0 var(--sp)}

/* Pagination. Deliberately the same pill vocabulary as .wa-chip above — the
   filter bar and the pager are the two navigation controls on this page and
   reading as one family is the point. Sized to a 44px tap target, which the
   chips (36px) are not, because these are the only way to reach page 2.
   `.has-pag` is set by the block when there is more than one page: without it
   the grid's 14vh bottom padding would strand the pager a screen below the
   last row. */
.work-archive.has-pag .wa-grid{padding-bottom:calc(var(--sp) / 2)}
.wa-pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding-block:0 var(--sp)}
.wa-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border:1px solid var(--border);border-radius:60px;font-family:var(--fu);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:border-color .3s,color .3s,background .3s,transform .3s}
.wa-pag a.page-numbers:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-2px)}
.wa-pag .page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wa-pag .page-numbers.dots{border-color:transparent;min-width:0;padding:0 2px;color:var(--ink3)}

@media(max-width:760px){
  .ws-media{height:72vh;height:72svh;min-height:440px}
  .ws-arrow{width:44px;height:44px;opacity:1}
  .ws-btn{padding:10px 15px;font-size:11px;letter-spacing:.1em;gap:6px}
  .ws-meta{gap:24px 32px}
  .ws-content{font-size:16px;margin-top:36px}
  .ws-more-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ws-more-hd{margin-bottom:28px}
  .wa-filter{gap:8px;margin-top:28px}
  .wa-chip{padding:8px 16px;font-size:11px}
  .work-archive.has-pag .wa-grid{padding-bottom:6vh}
  .wa-pag{gap:8px}
  .wa-pag .page-numbers{min-width:44px;height:44px;padding:0 12px;font-size:11px}
  .ct-actions{gap:10px}
  .f-sub,.f-wa{flex:1;justify-content:center;min-width:140px}
}

/* =============================================================
   UX/UI polish — image fade-in, ken burns, nav hide, micro-motion
   ============================================================= */

/* Progressive image fade-in (only when JS is present so images never stay hidden) */
.js .tm-fade{opacity:0}
.js .tm-fade.tm-in{opacity:1}
.js .wt.tm-fade,.js .ws-slide-img.tm-fade,.js .ab-img.tm-fade,.js .reel-bg.tm-fade{transition:opacity .9s ease,transform .8s cubic-bezier(.2,.8,.2,1)}

/* Nav: smooth shrink + hide on scroll-down, reveal on scroll-up */
#nav{transition:padding .4s cubic-bezier(.4,0,.2,1),background .4s,transform .55s cubic-bezier(.4,0,.2,1)}
#nav.nav-hidden{transform:translateY(-101%)}

/* Micro-interactions */
.wa-chip{transition:border-color .3s,color .3s,background .3s,transform .3s}
.wa-chip:hover{transform:translateY(-2px)}
.f-wa{transition:border-color .3s,background .3s,transform .3s}
.f-wa:hover{transform:translateY(-2px)}
.ct-lk{transition:color .3s,transform .3s}
.ct-lk:hover{transform:translateX(4px)}
.sdiv{will-change:auto}

/* Respect users who prefer reduced motion.
   main.js reads the same media query and simply does not start the work — the
   loader, the page-transition fade, the hero parallax and the
   IntersectionObserver reveal are all skipped rather than merely being
   animated to zero here. What is left in this block is the guarantee that the
   page is still correct if any of that CSS-only state (opacity:0 start
   states, hover fades) survives. */
@media(prefers-reduced-motion:reduce){
  /* Zero delays as well as durations: a .3s transition-delay is still a wait,
     and the reveal stagger (.rd1-.rd3) and the hero intro are built on delays. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .ws-track{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  .js .tm-fade{opacity:1!important}
  #nav.nav-hidden{transform:none!important}
  .hero-vw img,.hero-vw video{transform:none!important}
  /* The hero headline lines start translated 105% out of an overflow:hidden
     box and are released by body.loaded; with motion off they must simply be
     in place. */
  .hero-ey,.hero-sub,.hero-acts,.hero-h .ln{opacity:1!important;transform:none!important}
}

/* =============================================================
   Subtle page transition — content fades in on load, out on exit
   (nav + footer persist; first visit still gets the intro loader)
   ============================================================= */
/* .35s, not .55s: this animates the opacity of <main>, i.e. of every LCP
   candidate on the page, and the browser will not count a contentful paint
   until it settles — so its duration is added to LCP on every single page load.
   Still reads as the same arrival fade, 200ms sooner. */
.js main.wp-block-group{animation:tmPageIn .35s ease both}
@keyframes tmPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html.tm-leaving main.wp-block-group{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;animation:none}
@media(prefers-reduced-motion:reduce){
  .js main.wp-block-group{animation:none}
  html.tm-leaving main.wp-block-group{opacity:1;transform:none;transition:none}
}

/* =============================================================
   STANDALONE PAGES — Studio / Services / Contact
   Shared page hero + CTA, plus per-page extras. Nav routes here
   ("pages everywhere"); homepage sections stay as teasers.
   ============================================================= */
.page-hero{padding-block:var(--sp-t) calc(var(--sp) / 2);text-align:center}
.page-title{font-family:var(--fd);font-weight:300;font-size:clamp(2.6rem,1.6rem + 5vw,6rem);line-height:1.02;letter-spacing:-.015em;color:var(--ink);margin:18px auto 0;max-width:16ch}
.page-title em{font-style:normal;color:inherit}
.page-lead{font-family:var(--fu);font-weight:400;font-size:clamp(1rem,.9rem + .5vw,1.2rem);color:var(--ink2);max-width:60ch;margin:26px auto 0;line-height:1.7}
/* Optional featured-image banner under any page hero (terminus_page_hero_media()).
   Full content-column width, a cinematic 2.35:1 letterbox to match a video studio,
   capped so a tall source never pushes the page content off-screen. */
.page-hero-media{margin:clamp(36px,4vw,60px) 0 0;aspect-ratio:2.35/1;max-height:64vh;overflow:hidden;background:var(--bg3)}
.page-hero-img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9)}
@media(max-width:640px){.page-hero-media{aspect-ratio:16/10}}

.page-cta{padding-block:var(--sp);text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px}
.page-cta-t{font-family:var(--fd);font-weight:300;font-size:clamp(2rem,1.4rem + 3vw,3.6rem);line-height:1.1;color:var(--ink)}

.ab-more{display:inline-flex;margin-top:34px}

/* Studio full page: approach columns */
.about--full{padding-top:2vh}
/* Studio bento.

   One grid holding what used to be two stacked sections — the portrait image
   with its Split — Worldwide button, the studio paragraph, and the three "how
   we work" points. The image occupies the left column for the grid's full
   height; the copy takes the top of the right side, then two half cells, then a
   full-width one. The 14px gap is deliberately the masonry gap, so the Studio
   page and the work grids read as the same system.

   The cells stretch (not `center` like the teaser's two columns), because in a
   bento the cell edges ARE the composition — a centred cell would float inside
   its own tile and break the mosaic. */
.st-bento{grid-template-columns:1.05fr 1fr 1fr;gap:14px;align-items:stretch}
.st-bento .ab-vis{grid-column:1;grid-row:1 / span 3;min-height:520px}
.st-bento .ab-vis:not(:has(img)){aspect-ratio:auto}
.st-bento .ab-img{height:100%;aspect-ratio:auto}
/* Inside the tile, not hanging off it: at a 14px gap the teaser's -28px offset
   would sit on top of the neighbouring cell. */
.st-bento .ab-tag{bottom:0;right:auto;left:0}
/* --bg3, not --bg2: the #about band this sits on is already --bg2, so a --bg2
   tile is literally invisible and the bento collapses into loose floating text.
   The hairline does the rest of the work — at these values the tiles read as
   tiles without turning into boxes that shout. */
.st-cell{background:var(--bg3);border:1px solid var(--border);padding:38px 34px 42px;display:flex;flex-direction:column;justify-content:center}
/* `-1` (the last grid line), never a hard column number: this same cell has to
   span 2 tracks at three columns and 1 track at one column, and `2 / 4` in a
   one-column grid does not clamp — it creates implicit columns and pushes the
   cell outside the content width. */
.st-cell--wide{grid-column:2 / -1}
.st-cell .ab-body{margin-bottom:0}
.st-col-t{font-family:var(--fd);font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);color:var(--ink);margin-bottom:14px;line-height:1.15}
.st-col-b{font-family:var(--fu);font-weight:400;font-size:16px;line-height:1.75;color:var(--ink2)}
/* Breakpoint is 1024, not 900, because that is where the global
   `.ab-vis{display:none}` kicks in — the homepage teaser drops its portrait
   image on narrow screens. The bento must NOT inherit that: the image is a
   whole grid cell there (and carries the Split — Worldwide button), so hiding
   it collapsed column one to 0px and left the three text cells adrift. Re-shown
   here and laid across the top as a landscape band instead. */
@media(max-width:1024px){
  .st-bento{grid-template-columns:1fr 1fr}
  /* The :not(:has(img)) empty-state rule above is (0,2,1) and would otherwise
     out-specify this one, collapsing the cell to zero height whenever no studio
     image is set — so it is repeated here rather than relying on order. */
  .st-bento .ab-vis,.st-bento .ab-vis:not(:has(img)){display:block;grid-column:1 / -1;grid-row:auto;min-height:0;aspect-ratio:16/10}
  .st-bento .ab-img{aspect-ratio:16/10}
  .st-cell--wide{grid-column:1 / -1}
}
@media(max-width:640px){
  .st-bento{grid-template-columns:1fr}
  .st-cell{padding:28px 24px 30px}
}

/* Services FULL page (/services) — SEO layout: alternating image + copy rows */
/* The /services page reuses the homepage Services section as a full-page
   wrapper, so it must NOT also be a content column — .page-hero, .sv-rows and
   .page-cta inside it each carry the column themselves, and leaving the cap and
   gutter on the wrapper too applied both twice (1088px content, inset 112px). */
.sv--full{max-width:none;padding:0}
.sv-rows{padding-block:calc(var(--sp) / 2);display:flex;flex-direction:column;gap:clamp(64px,8vw,128px)}
.sv-arow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center}
.sv-arow:nth-child(even) .sv-arow-vis{order:2}
.sv-arow-vis{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--bg3)}
.sv-arow-vis .ab-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.sv-arow:hover .ab-img{transform:scale(1.045)}
.sv-arow-t{font-family:var(--fd);font-weight:300;font-size:clamp(30px,4vw,58px);line-height:1.02;letter-spacing:-.01em;color:var(--ink);margin-bottom:20px}
.sv-arow-t a{color:inherit}
.sv-arow-t a:hover{color:var(--accent)}
.sv-arow-b{font-family:var(--fu);font-weight:300;font-size:clamp(15px,1.05vw,17px);line-height:1.8;color:var(--ink2);max-width:46ch;margin-bottom:30px}
.sv-arow-lk{display:inline-flex}
@media(max-width:820px){
  .sv-arow{grid-template-columns:1fr;gap:24px}
  .sv-arow:nth-child(even) .sv-arow-vis{order:0}
  .sv-rows{gap:64px}
}

/* Contact full page: studio detail list */
.contact--full{padding-top:4vh}
.ct-detail{display:flex;flex-direction:column;gap:24px;margin-bottom:44px}
.ct-d{display:flex;flex-direction:column;gap:6px}
.ct-d span{font-family:var(--fu);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.ct-d strong{font-family:var(--fd);font-weight:400;font-size:22px;color:var(--ink)}
.ct-d a{color:var(--ink)}.ct-d a:hover{color:var(--accent)}

@media(max-width:900px){
}
@media(max-width:640px){
}