/*
 * Norths North — main stylesheet
 *
 * 1. Fonts: Inter, self-hosted (the Latin file Claude Design bundled).
 * 2. The original stylesheet from the Claude Design export, unchanged.
 * 3. Components: the design's inline styles, moved into classes.
 * 4. Inner pages and block-editor content.
 */

/* ==========================================================================
   1. Fonts
   ========================================================================== */
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Original stylesheet (Claude Design export) — keep in this order
   ========================================================================== */
*{box-sizing:border-box}
body{margin:0;background:#0B0E11;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #F5AB00;outline-offset:3px}
button{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;border:0;font:700 15px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:transform .2s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:#F5AB00;color:#0B0E11}
.btn-amber:hover{background:#FFC233;color:#0B0E11}
.btn-ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:#0B0E11}
.btn-ink{background:#0B0E11;color:#fff}
.btn-ink:hover{background:#0B5A84;color:#fff}
.navlink{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9);padding:12px 2px;transition:color .2s}
button.navlink{background:none;border:0;font-family:inherit;cursor:default}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:#F5AB00;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navlink:hover,.has-dd:hover>.navlink{color:#F5AB00}
.navlink:hover::after,.has-dd:hover>.navlink::after{transform:scaleX(1)}
.has-dd{position:relative}
.caret{transition:transform .25s ease}
.has-dd:hover .caret,.has-dd:focus-within .caret{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:210px;padding:8px;background:rgba(8,10,12,.97);border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:40}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd a{display:block;padding:12px 14px;border-radius:6px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9);transition:background .2s,color .2s,padding-left .2s}
.dd a:hover{background:rgba(245,171,0,.14);color:#F5AB00;padding-left:20px}
.hdr{transition:background .35s ease,padding .35s ease,box-shadow .35s ease;animation:hdrIn .9s cubic-bezier(.2,.7,.2,1) both}
.hdr.scrolled{background:rgba(8,10,12,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:12px !important;padding-bottom:12px !important;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hin{animation:fadeUp .95s cubic-bezier(.2,.7,.2,1) both}
[data-reveal]{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv-on [data-reveal]:not(.in){opacity:0;transform:translateY(32px)}
a svg{transition:transform .25s ease}
a:hover svg{transform:translateX(4px)}
a{transition:color .2s}
.btn-amber{animation:glow 3.4s ease-in-out infinite}
.btn-amber:hover{animation:none;box-shadow:0 10px 26px rgba(245,171,0,.35)}
.tile{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile-h{position:relative}
.tile-h::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%);opacity:0;transition:opacity .4s ease}
.tile-h::after{content:"View";position:absolute;left:16px;bottom:16px;z-index:2;padding:10px 18px;border-radius:999px;background:#F5AB00;color:#0B0E11;font:700 13px/1 'Inter',sans-serif;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.tile:hover .tile-h::before{opacity:1}
.tile:hover .tile-h::after{opacity:1;transform:none}
.vid-img{transition:transform 1.4s ease,opacity .6s ease}
.vid:hover .vid-img{transform:scale(1.05);opacity:.75 !important}
.playbtn{transition:transform .3s ease,background .3s ease;animation:ring 2.4s ease-out infinite}
.vid:hover .playbtn,.playbtn:hover{transform:scale(1.1);background:#FFC233 !important}
.blink{animation:blink 1.2s steps(2,start) infinite}
.spin{transform-origin:200px 200px;animation:spin 90s linear infinite}
.tabbtn{transition:background .25s ease,color .25s ease,transform .2s ease,border-color .2s ease}
.tabbtn:hover{transform:translateY(-2px);border-color:#F5AB00 !important}
.swap>*{animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.swap>*:nth-child(2){animation-delay:.12s}
.swap li{animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both}
.swap li:nth-child(1){animation-delay:.2s}
.swap li:nth-child(2){animation-delay:.3s}
.swap li:nth-child(3){animation-delay:.4s}
.mosaic>div img{transition:transform .9s ease}
.mosaic>div:hover img{transform:scale(1.06)}
.marquee{overflow:hidden;white-space:nowrap}
.mq-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;flex-shrink:0}
.mq-word{font-size:clamp(26px,3.6vw,52px);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);padding:0 28px;transition:color .3s}
.mq-word:hover{color:#F5AB00;-webkit-text-stroke-color:#F5AB00}
.mq-dot{width:10px;height:10px;background:#F5AB00;transform:rotate(45deg);flex-shrink:0}
.cue-line{display:block;width:1px;height:44px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.cue-line::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#F5AB00;animation:cue 1.8s ease-in-out infinite}
.totop{position:fixed;right:28px;bottom:28px;z-index:50;width:52px;height:52px;border-radius:50%;background:#F5AB00;color:#0B0E11;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,background .2s}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:#FFC233}
.totop:hover svg{transform:translateY(-3px)}
.badge{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.badge:hover{transform:rotate(20deg) scale(1.04)}
footer a:hover{color:#F5AB00}
.svc-row{display:flex;gap:14px;height:620px}
.svc-p{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:6px;background:#14222d;transition:flex .8s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover .svc-p{flex:.7}
.svc-row .svc-p:hover,.svc-row .svc-p:focus-within{flex:3.3}
.svc-row:not(:hover) .svc-p:first-child{flex:3.3}
.svc-p img{transition:transform 1.4s ease}
.svc-p:hover img{transform:scale(1.06)}
.svc-p .more{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .5s ease .12s}
.svc-p:hover .more,.svc-p:focus-within .more,.svc-row:not(:hover) .svc-p:first-child .more{max-height:260px;opacity:1}
.ch-list{border-bottom:1px solid rgba(255,255,255,.28)}
.ch-row{display:flex;align-items:center;gap:22px;padding:26px 14px;border-top:1px solid rgba(255,255,255,.28);color:#fff;position:relative;transition:background .35s ease,color .35s ease,padding .4s cubic-bezier(.2,.7,.2,1)}
.ch-n{flex-shrink:0;font-size:13px;font-weight:700;letter-spacing:.2em;color:#F5AB00;transition:color .3s}
.ch-t{font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.1;flex:1;text-transform:none}
.ch-th{flex-shrink:0;width:0;height:64px;border-radius:6px;overflow:hidden;opacity:0;transition:width .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.ch-th img{width:110px;height:64px;object-fit:cover;display:block}
.ch-a{flex-shrink:0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ch-row:hover,.ch-row:focus-visible{background:#F5AB00;color:#0B0E11;padding-left:26px;padding-right:26px}
.ch-row:hover .ch-n,.ch-row:focus-visible .ch-n{color:#C5351B}
.ch-row:hover .ch-th,.ch-row:focus-visible .ch-th{width:110px;opacity:1}
.ch-row:hover .ch-a{transform:translateX(8px)}
.ch-row:active{transform:scale(.99)}
@media (max-width:900px){.ch-th{display:none}.ch-row{padding:20px 6px}}
.svc-num{transition:color .3s}
.svc-p:hover .svc-num{color:#F5AB00}
.card{background:#ffffff;border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(11,14,17,.08);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(11,14,17,.16)}
.card img{transition:transform 1s ease}
.card:hover img{transform:scale(1.05)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hdrIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(245,171,0,0)}50%{box-shadow:0 0 0 8px rgba(245,171,0,.16)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(245,171,0,.5)}100%{box-shadow:0 0 0 30px rgba(245,171,0,0)}}
@keyframes blink{to{opacity:.15}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes cue{0%{top:-50%}100%{top:100%}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv-on [data-reveal]:not(.in){opacity:1 !important;transform:none !important}
}
.vf{position:relative}
.vf::before,.vf::after{content:"";position:absolute;width:30px;height:30px;pointer-events:none}
.vf::before{top:0;left:0;border-top:2px solid rgba(255,255,255,.65);border-left:2px solid rgba(255,255,255,.65)}
.vf::after{bottom:0;right:0;border-bottom:2px solid rgba(255,255,255,.65);border-right:2px solid rgba(255,255,255,.65)}
.tile img{transition:transform .8s ease}
.tile:hover img{transform:scale(1.04)}
.burger{display:none}
.soc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);color:#fff;transition:background .2s,color .2s,border-color .2s,transform .2s}
.soc:hover{background:#F5AB00;border-color:#F5AB00;color:#0B0E11;transform:translateY(-3px)}
.soc svg,.soc:hover svg{transform:none !important}
@media (max-width:1240px){
  .nav-links,.nav-cta{display:none !important}
  .burger{display:inline-flex !important}
}
@media (max-width:900px){
  .pad{padding-left:20px !important;padding-right:20px !important}
  .g3{grid-template-columns:1fr !important}
  .split{grid-template-columns:1fr !important;gap:40px !important}
  .foot{grid-template-columns:1fr 1fr !important}
  .shift{margin-top:0 !important}
  .hide-m{display:none !important}
  .tile-h{height:380px !important}
  .svc-row{flex-direction:column !important;height:auto !important}
  .svc-p{flex:none !important;height:420px}
  .svc-p .more{max-height:260px !important;opacity:1 !important}
  .mosaic{height:460px !important}
}
.nnb{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;flex-shrink:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.nnb img{width:100%;height:100%;display:block}
.nnb:hover{transform:rotate(18deg) scale(1.08);filter:drop-shadow(0 0 10px rgba(245,171,0,.55))}
.nnb:focus-visible{outline:3px solid #F5AB00;outline-offset:3px}
.mega{position:absolute;top:100%;left:50%;transform:translate(-50%,12px);width:min(780px,92vw);padding:10px;margin-top:6px;background:rgba(8,10,12,.97);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .25s;z-index:40}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-dd:hover .mega,.has-dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mtile{display:flex;align-items:center;gap:16px;padding:12px;border-radius:10px;color:#fff;position:relative;transition:background .25s ease;opacity:0;transform:translateY(8px)}
.has-dd:hover .mtile,.has-dd:focus-within .mtile{opacity:1;transform:none;transition:background .25s ease,opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.has-dd:hover .mtile:nth-child(2){transition-delay:.05s,.05s,.05s}.has-dd:hover .mtile:nth-child(3){transition-delay:.1s,.1s,.1s}.has-dd:hover .mtile:nth-child(4){transition-delay:.15s,.15s,.15s}
.mtile:hover{background:rgba(245,171,0,.13)}.mtile:nth-child(5){grid-column:1/-1}.has-dd:hover .mtile:nth-child(5){transition-delay:.2s,.2s,.2s}
.mtile .mth{position:relative;flex-shrink:0;width:92px;height:92px;border-radius:8px;overflow:hidden;background:#14222d}
.mtile .mth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mtile:hover .mth img{transform:scale(1.14)}
.mtile .mn{font-size:11px;font-weight:700;letter-spacing:.2em;color:#F5AB00;margin-bottom:4px}
.mtile .mt{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin-bottom:4px;color:#fff}
.mtile .md{font-size:13px;line-height:1.4;color:rgba(255,255,255,.72)}
.mtile .ma{margin-left:auto;flex-shrink:0;color:#F5AB00;opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .25s ease}
.mtile:hover .ma{opacity:1;transform:none}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:14px 14px 6px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.72)}
.mega-foot a{color:#F5AB00;font-weight:700;font-size:14px;transition:letter-spacing .2s}
.mega-foot a:hover{letter-spacing:.02em}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
.btn:hover::before{transform:translateX(260%) skewX(-18deg);transition:transform .75s ease}
.btn svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:translateY(0) scale(.96);transition-duration:.08s}
.btn-ink:hover{box-shadow:0 10px 24px rgba(11,90,132,.4)}
.btn-ghost:hover{box-shadow:0 10px 24px rgba(255,255,255,.18)}
.nnb:active,.tabbtn:active,.pill:active,.totop:active{transform:scale(.92)}
button[aria-label]:not(.burger){transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s ease,color .25s ease}
button[aria-label]:not(.burger):hover{transform:scale(1.1)}
button[aria-label]:not(.burger):active{transform:scale(.92)}
.mtile:active,.colcard:active,.imgbox:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.btn::before{display:none}.btn svg,.btn:hover svg{transform:none}}

/* Rules the inner pages (About, Contact, services) add to the same stylesheet. */
.pk{background:#ffffff;color:#0B0E11;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 rgba(11,14,17,.08);transition:background .35s ease,color .35s ease,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.pk-top{display:block;width:100%;text-align:left;padding:28px;background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.pk-price{color:#0B5A84;transition:color .35s ease}
.pk-plus{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;font-size:20px;line-height:1;transition:transform .35s ease,background .35s ease,color .35s ease}
.pk-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.pk-more>div{overflow:hidden;min-height:0}
.pk:hover,.pk.open{background:#0B0E11;color:#ffffff;transform:translateY(-6px);box-shadow:0 24px 48px rgba(11,14,17,.22)}
.pk:hover .pk-price,.pk.open .pk-price{color:#F5AB00}
.pk:hover .pk-more,.pk.open .pk-more{grid-template-rows:1fr}
.pk:hover .pk-plus,.pk.open .pk-plus{transform:rotate(45deg);background:#F5AB00;border-color:#F5AB00;color:#0B0E11}
.navlink.active{color:#F5AB00}
.navlink.active::after{transform:scaleX(1)}
.fld{width:100%;min-height:52px;padding:14px 16px;border:1.5px solid #cfc9bb;border-radius:8px;background:#ffffff;font:400 16px/1.3 'Inter',system-ui,sans-serif;color:#0B0E11}
.fld:focus{outline:3px solid #F5AB00;outline-offset:1px;border-color:#0B0E11}
textarea.fld{min-height:150px;resize:vertical}
.lbl{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.masonry{column-count:3;column-gap:16px}
.mi{break-inside:avoid;margin-bottom:16px;position:relative;overflow:hidden;border-radius:4px;background:#14222d}
.gbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;overflow:hidden}
.gbtn img{width:100%;display:block;transition:transform .9s ease}
.gbtn:hover img{transform:scale(1.04)}
.gbtn::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 50%);opacity:0;transition:opacity .4s ease}
.gbtn::after{content:"View";position:absolute;left:14px;bottom:14px;z-index:2;padding:9px 16px;border-radius:999px;background:#F5AB00;color:#0B0E11;font:700 13px/1 'Inter',sans-serif;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.gbtn:hover::before{opacity:1}
.gbtn:hover::after{opacity:1;transform:none}
.crumb a{color:rgba(255,255,255,.8);transition:color .2s}
.crumb a:hover{color:#F5AB00}
.colcard{position:relative;display:block;overflow:hidden;border-radius:6px;height:440px;background:#14222d}
.colcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.colcard:hover img{transform:scale(1.06)}
.colcard .go{transition:transform .3s ease,background .3s ease}
.colcard:hover .go{transform:translateX(6px);background:#F5AB00;color:#0B0E11}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);font-size:15px;font-weight:700;color:#fff;transition:background .2s,color .2s,border-color .2s,transform .2s}
.pill:hover{background:#F5AB00;border-color:#F5AB00;color:#0B0E11;transform:translateY(-2px)}
.imgbox{position:relative;overflow:hidden;border-radius:6px;background:#14222d}
.imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.imgbox:hover img{transform:scale(1.04)}
@media (max-width:900px){
  .masonry{column-count:1}
  .g4{grid-template-columns:1fr 1fr !important}
  .g2{grid-template-columns:1fr !important}
  .colcard{height:320px}
}
@media (max-width:560px){.g4{grid-template-columns:1fr !important}}

/* ==========================================================================
   3. Components
   Every rule below is a former inline style from the Claude Design file,
   moved here with its values unchanged. These rules must stay AFTER the
   original stylesheet above: inline styles used to win over it, and coming
   later (at equal specificity) is what keeps that behaviour.
   ========================================================================== */

.site { width: 100%; background: #0B0E11; color: #ffffff; font-family: 'Inter', system-ui, sans-serif; }
[hidden] { display: none !important; }

/* Shared bits ------------------------------------------------------------- */
.diamond { width: 9px; height: 9px; background: #F5AB00; transform: rotate(45deg); display: inline-block; }
.diamond--red { background: #C5351B; }
.diamond--sm { width: 8px; height: 8px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.eyebrow--amber { color: #F5AB00; }
.eyebrow--blue { color: #0B5A84; }
.hl-amber { color: #F5AB00; }
.hl-red { color: #C5351B; }

/* Scroll progress --------------------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #F5AB00; transform: scaleX(0); transform-origin: 0 50%; z-index: 60; }

/* Header ------------------------------------------------------------------ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 48px; }
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 46px; width: auto; display: block; }
.site-logo__text { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.mtile .mn, .mtile .mt, .mtile .md { display: block; }
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.burger { padding: 0 20px; }

/* Mobile menu */
.mobile-menu { position: fixed; top: 74px; left: 0; right: 0; z-index: 29; max-height: calc(100vh - 74px); overflow-y: auto; background: rgba(8,10,12,0.96); padding: 12px 20px 28px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__link { font-size: 18px; font-weight: 700; padding: 12px 0 12px 0px; border-bottom: 1px solid rgba(255,255,255,0.12); color: #ffffff; pointer-events: auto; }
.mobile-menu__link--sub { font-size: 16px; padding-left: 20px; }
.mobile-menu__link--head { font-size: 13px; color: #F5AB00; pointer-events: none; }
.mobile-menu__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Hero -------------------------------------------------------------------- */
.hero { position: relative; min-height: 900px; overflow: hidden; background: #0B0E11; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__bg { position: absolute; top: -90px; bottom: 0; left: 0; right: 0; will-change: transform; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.4s ease, transform 9s ease-out; }
.hero__slide.is-active { opacity: 1; transform: scale(1.07); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,12,0.84) 0%, rgba(8,10,12,0.5) 46%, rgba(8,10,12,0.08) 100%), linear-gradient(0deg, rgba(8,10,12,0.9) 0%, rgba(8,10,12,0) 58%), linear-gradient(180deg, rgba(8,10,12,0.7) 0%, rgba(8,10,12,0) 22%); }
.hero__thirds { position: absolute; inset: 0; pointer-events: none; }
.hero__third { position: absolute; background: rgba(255,255,255,0.07); }
.hero__third--v1 { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.hero__third--v2 { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.hero__third--h1 { top: 33.333%; left: 0; right: 0; height: 1px; }
.hero__third--h2 { top: 66.666%; left: 0; right: 0; height: 1px; }
.hero__vf { position: absolute; top: 108px; left: 28px; right: 28px; bottom: 28px; pointer-events: none; }
.hero__copy { position: relative; z-index: 5; padding: 190px 48px 120px; max-width: 1240px; width: 100%; margin: 0 auto; text-align: center; }
.hero__title { animation-delay: 0.45s; font-size: clamp(56px, 9.4vw, 138px); font-weight: 700; line-height: 0.94; letter-spacing: -0.035em; margin-bottom: 26px; }
.hero__kicker { animation-delay: 0.6s; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #F5AB00; margin-bottom: 22px; margin-top: 0; }
.hero__cue { animation-delay: 1.2s; position: absolute; z-index: 6; left: 48px; bottom: 40px; display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero__controls { position: absolute; z-index: 6; right: 48px; bottom: 56px; display: flex; align-items: center; gap: 18px; }
.hero__meta { text-align: right; }
.hero__counter { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: #F5AB00; }
.hero__caption { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 4px; }
.hero__dots { display: flex; align-items: center; gap: 8px; }
.hero__dot { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.hero__dot span { display: block; height: 4px; width: 18px; background: rgba(255,255,255,0.5); border-radius: 2px; transition: width .4s ease, background .4s ease; }
.hero__dot.is-active span { width: 44px; background: #F5AB00; }

/* Offer ------------------------------------------------------------------- */
.offer { position: relative; overflow: hidden; background: #F5AB00; color: #0B0E11; }
.offer__mark { position: absolute; left: 24px; bottom: 24px; height: 120px; width: auto; opacity: 0.18; pointer-events: none; }
.offer__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 88px 48px; max-width: 1440px; margin: 0 auto; }
.offer__frame { background: #0B0E11; padding: 14px; border-radius: 10px; box-shadow: 0 30px 60px rgba(11,14,17,0.35); }
.offer__img { display: block; width: 100%; height: auto; border-radius: 4px; }
.offer__card { background: #0B5A84; color: #ffffff; border-radius: 14px; padding: clamp(32px, 4.4vw, 64px); box-shadow: 0 30px 60px rgba(11,14,17,0.3); }
.offer__badge { display: inline-flex; align-items: center; gap: 10px; background: #C5351B; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; margin-bottom: 26px; }
.offer__title { font-size: clamp(36px, 4.4vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 22px; color: #ffffff; }
.offer__intro { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 30px; max-width: 560px; }
.offer__list-label { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #F5AB00; margin-bottom: 6px; }
.offer__list { display: flex; flex-direction: column; margin-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.22); }
.offer__item { display: flex; align-items: center; gap: 16px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.3; color: #ffffff; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.22); }
.offer__tick { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #F5AB00; color: #0B0E11; display: inline-flex; align-items: center; justify-content: center; }
.offer__foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.offer__price-wrap { display: flex; align-items: baseline; gap: 12px; }
.offer__price { font-size: clamp(72px, 8vw, 120px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: #F5AB00; }
.offer__price-note { font-size: 16px; font-weight: 700; color: #ffffff; }
.offer__btn { min-height: 64px; padding: 0 44px; font-size: 19px; }

/* Choose your experience -------------------------------------------------- */
.chooser { position: relative; overflow: hidden; background: #0B5A84; color: #ffffff; }
.chooser__mark { position: absolute; left: 40px; bottom: 40px; height: 230px; width: auto; opacity: 0.1; pointer-events: none; }
.chooser__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: 72px; padding: 104px 48px; max-width: 1440px; margin: 0 auto; }
.chooser__eyebrow { margin-bottom: 20px; }
.chooser__title { font-size: clamp(36px, 4.4vw, 62px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 22px; }
.chooser__text { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.84); max-width: 380px; }

/* About + "Pick your story" ----------------------------------------------- */
.about { position: relative; overflow: hidden; background: #F3F0E8; color: #0B0E11; }
.about__mark { position: absolute; right: 40px; bottom: 32px; height: 150px; width: auto; opacity: 0.07; pointer-events: none; }
.about__inner { padding: 112px 48px 120px; max-width: 1440px; margin: 0 auto; }
.about__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-bottom: 72px; }
.about__eyebrow { margin-bottom: 20px; }
.about__title { font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.about__body { padding-top: 6px; }
.about__lead { font-size: 20px; line-height: 1.55; color: #22272c; margin-bottom: 18px; }
.about__text { font-size: 17px; line-height: 1.6; color: #444a51; margin-bottom: 32px; }
.stories__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.stories__eyebrow { margin-bottom: 16px; }
.stories__title { font-size: clamp(34px, 4vw, 58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stories__hint { font-size: 15px; color: #444a51; max-width: 320px; line-height: 1.5; }
.svc-p__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-p__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,12,0.9) 0%, rgba(8,10,12,0.25) 58%, rgba(8,10,12,0.1) 100%); }
.svc-p__num { position: absolute; top: 24px; left: 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: #ffffff; }
.svc-p__body { position: absolute; left: 26px; right: 26px; bottom: 26px; color: #ffffff; }
.svc-p__title { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 4px; }
.svc-p__more { width: min(100%, 380px); padding-top: 12px; }
.svc-p__tagline { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #F5AB00; margin-bottom: 10px; }
.svc-p__text { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.9); margin-bottom: 18px; }

/* Featured film ----------------------------------------------------------- */
.film { background: #0B0E11; }
.film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 340px; overflow: hidden; background: #0B0E11; }
.film__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.film__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,12,0.85) 0%, rgba(8,10,12,0.15) 60%); }
.film__vf { position: absolute; inset: 28px; pointer-events: none; }
.film__rec { position: absolute; top: 44px; left: 52px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; }
.film__dot { width: 10px; height: 10px; border-radius: 50%; background: #C5351B; display: inline-block; }
.film__tc { font-weight: 500; letter-spacing: 0.12em; color: rgba(255,255,255,0.75); }
.film__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.film__play { width: 104px; height: 104px; border-radius: 50%; background: #F5AB00; color: #0B0E11; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.film__caption { position: absolute; left: 52px; bottom: 44px; right: 52px; }
.film__title { font-size: clamp(22px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.film__sub { font-size: 15px; color: rgba(255,255,255,0.8); margin-top: 8px; }

/* Statement --------------------------------------------------------------- */
.statement { background: #F3F0E8; color: #0B0E11; }
.statement__inner { padding: 120px 48px; max-width: 1440px; margin: 0 auto; }
.statement__eyebrow { margin-bottom: 28px; }
.statement__text { font-size: clamp(28px, 4.1vw, 60px); font-weight: 700; line-height: 1.14; letter-spacing: -0.03em; max-width: 1180px; }

/* Quote ------------------------------------------------------------------- */
.quote { position: relative; overflow: hidden; background: #C5351B; color: #ffffff; }
.quote__mark { position: absolute; left: 40px; bottom: 28px; height: 170px; width: auto; opacity: 0.1; pointer-events: none; }
.quote__spin { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); opacity: 0.16; }
.quote__inner { position: relative; padding: 120px 48px; max-width: 1440px; margin: 0 auto; }
.quote__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 22px; }
.quote__title { --d: 0.1s; font-size: clamp(44px, 7vw, 104px); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; max-width: 980px; margin-bottom: 26px; }
.quote__text { --d: 0.2s; font-size: 19px; line-height: 1.55; max-width: 560px; margin-bottom: 38px; }
.quote__actions { --d: 0.3s; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.quote__btn { min-height: 60px; padding: 0 40px; font-size: 17px; }
.quote__how { min-height: 60px; padding: 0 34px; font-size: 17px; }

/* Additional services (tabs) ---------------------------------------------- */
.services { background: #0B0E11; color: #ffffff; }
.services__inner { padding: 120px 48px; max-width: 1440px; margin: 0 auto; }
.services__eyebrow { margin-bottom: 18px; }
.services__title { --d: 0.1s; font-size: clamp(38px, 4.8vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 36px; }
.services__tabs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.svc-tab { min-height: 52px; padding: 0 30px; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 700; background: transparent; color: #ffffff; border: 1.5px solid rgba(255,255,255,0.4); transition: background .25s ease, color .25s ease; }
.svc-tab[aria-pressed="true"] { background: #F5AB00; color: #0B0E11; border: 1.5px solid #F5AB00; }
.svc-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: stretch; }
.svc-panel__text { display: flex; flex-direction: column; justify-content: center; }
.svc-panel__title { font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 20px; }
.svc-panel__body { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.86); margin-bottom: 26px; max-width: 520px; }
.svc-panel__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.svc-panel__item { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.45; }
.svc-panel__bullet { flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; background: #F5AB00; transform: rotate(45deg); display: inline-block; }
.svc-panel__note { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin-bottom: 32px; max-width: 520px; }
.mosaic { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.mosaic__cell { grid-row: auto; position: relative; overflow: hidden; border-radius: 4px; min-height: 0; }
.mosaic__cell--main { grid-row: 1 / span 2; }
.mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic__ph { position: absolute; inset: 0; background: #14222d; display: flex; align-items: center; justify-content: center; padding: 28px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.68); line-height: 1.5; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: #06080A; color: #ffffff; border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer__inner { padding: 88px 48px 40px; max-width: 1440px; margin: 0 auto; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; margin-bottom: 64px; }
.site-footer__badge { width: 132px; height: 132px; display: block; margin-bottom: 20px; }
.site-footer__text { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 300px; }
.site-footer__heading { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #F5AB00; margin-bottom: 20px; }
.site-footer__list { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.site-footer__list a { display: inline-block; padding: 6px 0; }
.site-footer__list .site-footer__email { font-weight: 700; }
.site-footer__plain { padding: 6px 0; color: rgba(255,255,255,0.78); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.7); }
.site-footer__bottom a { font-weight: 700; }

/* "How it works" popup ---------------------------------------------------- */
.how { position: fixed; inset: 0; z-index: 100; background: rgba(6,8,10,0.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease both; }
.how__box { position: relative; width: 100%; max-width: 1000px; max-height: 92vh; overflow-y: auto; background: #F3F0E8; color: #0B0E11; border-radius: 10px; padding: 52px 48px 44px; animation: pop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.how__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #0B0E11; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.how__eyebrow { margin-bottom: 16px; }
.how__title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 36px; max-width: 760px; }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 36px; }
.how__num { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #C5351B; margin-bottom: 14px; }
.how__step-title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
.how__step-text { font-size: 15px; line-height: 1.55; color: #444a51; }

/* ==========================================================================
   4. Inner pages (About, Contact, services, legal, projects, 404).
   Like section 3, every value is a former inline style from the Claude Design
   exports of those pages, unchanged.
   ========================================================================== */

/* Shared ------------------------------------------------------------------ */
.mb18 { margin-bottom: 18px; }
.smark { position: absolute; width: auto; pointer-events: none; }
.smark--rb { right: 40px; bottom: 28px; height: 140px; opacity: 0.07; }
.smark--rt { right: 40px; top: 28px; height: 150px; opacity: 0.09; }
.smark--lb { left: 40px; bottom: 28px; height: 150px; opacity: 0.07; }
.smark--150 { height: 150px; }
.smark--o08 { opacity: 0.08; }
.btn-ghost--ink { border-color: #0B0E11; color: #0B0E11; }

/* Banner ------------------------------------------------------------------ */
.banner { position: relative; min-height: 560px; overflow: hidden; background: #0B0E11; display: flex; flex-direction: column; justify-content: flex-end; }
.banner--short { min-height: 520px; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,12,0.86) 0%, rgba(8,10,12,0.5) 50%, rgba(8,10,12,0.15) 100%), linear-gradient(0deg, rgba(8,10,12,0.88) 0%, rgba(8,10,12,0) 60%), linear-gradient(180deg, rgba(8,10,12,0.7) 0%, rgba(8,10,12,0) 24%); }
.banner__vf { position: absolute; top: 108px; left: 28px; right: 28px; bottom: 28px; pointer-events: none; }
.banner__inner { position: relative; z-index: 5; padding: 180px 48px 80px; max-width: 1240px; }
.banner__crumb { animation-delay: 0.3s; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 20px; }
.banner__sep { opacity: 0.5; }
.banner__title { animation-delay: 0.45s; font-size: clamp(44px, 7vw, 100px); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 24px; }
.banner__title--page { font-size: clamp(48px, 8vw, 112px); line-height: 0.96; }
.banner__intro { animation-delay: 0.65s; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; max-width: 640px; color: rgba(255,255,255,0.88); }
.banner__actions { animation-delay: 0.8s; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* Service: introduction --------------------------------------------------- */
.sv-overview { position: relative; overflow: hidden; background: #F3F0E8; color: #0B0E11; }
.sv-overview--alt { background: #ECE8DD; }
.sv-overview__inner { padding: 104px 48px 104px; max-width: 1440px; margin: 0 auto; }
.sv-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.sv-overview__title { font-size: clamp(34px, 4.2vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 22px; }
.sv-overview__text { font-size: 18px; line-height: 1.6; color: #444a51; margin-bottom: 24px; max-width: 560px; }
.sv-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.sv-list__item { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; }
.sv-list__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; background: #F5AB00; transform: rotate(45deg); display: inline-block; }
.sv-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sv-pair__img { height: 520px; }

/* Service: packages ------------------------------------------------------- */
.sv-packages { background: #ECE8DD; color: #0B0E11; }
.sv-packages__inner { padding: 0px 48px 104px; max-width: 1440px; margin: 0 auto; }
.sv-packages__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; margin-bottom: 64px; }
.sv-packages__title { font-size: clamp(32px, 3.8vw, 54px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 22px; }
.sv-packages__text { font-size: 18px; line-height: 1.6; color: #22272c; max-width: 560px; }
.sv-includes { background: #0B0E11; color: #ffffff; border-radius: 8px; padding: 32px; }
.sv-includes__label { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #F5AB00; margin-bottom: 18px; }
.sv-includes__list { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.45; }
.sv-includes__item { display: flex; gap: 12px; }
.sv-includes__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; background: #F5AB00; transform: rotate(45deg); }
.sv-packages__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.sv-packages__heading { font-size: clamp(28px, 3vw, 42px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.sv-packages__hint { font-size: 15px; color: #444a51; }
.sv-packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pk__name { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; margin-bottom: 14px; }
.pk__price { display: block; font-size: clamp(48px, 5vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pk__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 15px; font-weight: 700; }
.pk__list { display: flex; flex-direction: column; gap: 10px; padding: 4px 28px 8px; font-size: 15px; line-height: 1.45; }
.pk__item { display: flex; gap: 12px; }
.pk__dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 7px; background: #F5AB00; transform: rotate(45deg); }
.pk__cta { padding: 12px 28px 28px; }

/* Service: photos --------------------------------------------------------- */
.sv-gallery { position: relative; overflow: hidden; background: #0B0E11; color: #ffffff; }
.sv-gallery__inner { padding: 96px 48px 104px; max-width: 1440px; margin: 0 auto; }
.sv-gallery__title { font-size: clamp(32px, 4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 40px; }
.sv-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sv-gallery__img { height: 420px; }

/* Quote and contact form -------------------------------------------------- */
.form-sec { position: relative; overflow: hidden; background: #F3F0E8; color: #0B0E11; }
.form-sec__inner { padding: 96px 48px 112px; max-width: 1440px; margin: 0 auto; }
.form-sec__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 64px; align-items: start; }
.form-sec__title { font-size: clamp(34px, 4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 32px; }
.form-sec__notice { background: #0B0E11; color: #ffffff; border-radius: 8px; padding: 18px 22px; font-size: 15px; line-height: 1.5; margin-bottom: 24px; border-left: 4px solid #F5AB00; }
.form-sent { background: #ffffff; border-radius: 8px; padding: 40px; animation: pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.form-sent__icon { width: 56px; height: 56px; border-radius: 50%; background: #F5AB00; color: #0B0E11; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.form-sent__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.form-sent__text { font-size: 16px; line-height: 1.6; color: #444a51; margin-bottom: 24px; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__checks { display: flex; flex-wrap: wrap; gap: 10px; }
.form__check { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #ffffff; border: 1.5px solid #cfc9bb; border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer; }
.form__checkbox { accent-color: #C5351B; width: 16px; height: 16px; }
.form__submit { min-height: 58px; padding: 0 38px; font-size: 17px; }
.nnm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-aside { background: #0B0E11; color: #ffffff; border-radius: 8px; padding: 36px; }
.form-aside__h { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #F5AB00; margin-bottom: 14px; }
.form-aside__h--first { margin-bottom: 18px; }
.form-aside__email { display: block; font-size: 20px; font-weight: 700; margin-bottom: 8px; word-break: break-word; }
.form-aside__loc { font-size: 15px; color: rgba(255,255,255,0.78); margin-bottom: 28px; }
.form-aside__steps { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.86); margin-bottom: 28px; }
.form-aside__steps--last { margin-bottom: 1em; } /* the browser default the design leaves in place */
.form-aside__links { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.form-aside__links--social { gap: 4px; margin-bottom: 28px; }
.form-aside__link { display: inline-block; padding: 6px 0; }

/* About ------------------------------------------------------------------- */
.ab-intro { position: relative; overflow: hidden; background: #F3F0E8; color: #0B0E11; }
.ab-intro__inner { padding: 104px 48px 112px; max-width: 1440px; margin: 0 auto; }
.ab-intro__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ab-intro__img { height: 620px; }
.ab-intro__title { font-size: clamp(36px, 4.4vw, 62px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 28px; }
.ab-intro__lead { font-size: 19px; line-height: 1.6; color: #22272c; margin-bottom: 18px; }
.ab-intro__text { font-size: 17px; line-height: 1.65; color: #444a51; margin-bottom: 18px; }
.ab-intro__text--last { margin-bottom: 32px; }
.ab-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 88px; }
.ab-stat { border-top: 2px solid #0B0E11; padding-top: 18px; }
.ab-stat__n { font-size: clamp(36px, 4vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ab-stat__l { font-size: 15px; color: #444a51; margin-top: 8px; }
.ab-shoot { position: relative; overflow: hidden; background: #0B0E11; color: #ffffff; }
.ab-shoot__inner { padding: 96px 48px 104px; max-width: 1440px; margin: 0 auto; }
.ab-shoot__title { font-size: clamp(36px, 4.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #ffffff; margin-bottom: 40px; }
.ab-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; color: #0B0E11; }
.ab-card { background: #ffffff; }
.ab-card__media { height: 220px; overflow: hidden; background: #d8d3c6; }
.ab-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-card__body { padding: 24px 24px 28px; }
.ab-card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.ab-card__text { font-size: 15px; line-height: 1.55; color: #444a51; }
.ab-how { background: #F3F0E8; color: #0B0E11; }
.ab-how__inner { padding: 96px 48px 104px; max-width: 1440px; margin: 0 auto; }
.ab-how__title { font-size: clamp(32px,3.8vw,56px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 40px; }
.ab-how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ab-how__n { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #C5351B; margin-bottom: 14px; }
.ab-how__h { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.ab-how__p { font-size: 16px; line-height: 1.6; color: #444a51; }
.ab-recent { background: #F3F0E8; color: #0B0E11; }
.ab-recent__inner { padding: 40px 48px 104px; max-width: 1440px; margin: 0 auto; }
.ab-recent__title { font-size: clamp(32px,3.6vw,52px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 32px; }
.ab-recent__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; font-size: 20px; font-weight: 700; }
.ab-recent__item { padding: 18px 0; border-top: 1px solid rgba(11,14,17,0.2); }
.ab-recent__detail { display: block; font-size: 14px; font-weight: 400; color: #444a51; margin-top: 4px; }
.ab-cta { position: relative; overflow: hidden; background: #C5351B; color: #ffffff; }
.ab-cta__inner { position: relative; padding: 104px 48px; max-width: 1440px; margin: 0 auto; }
.ab-cta__title { font-size: clamp(36px, 5.4vw, 80px); font-weight: 700; line-height: 1; letter-spacing: -0.035em; max-width: 960px; margin-bottom: 22px; }
.ab-cta__text { font-size: 19px; line-height: 1.55; max-width: 560px; margin-bottom: 34px; }
.ab-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ab-cta__btn { min-height: 58px; padding: 0 36px; font-size: 17px; }
.ab-cta__btn--2 { padding: 0 30px; }

/* Other pages (legal, projects, posts, 404) ------------------------------- */
.page-body { background: #F3F0E8; color: #0B0E11; }
.page-body__inner { padding: 104px 48px 120px; max-width: 1440px; margin: 0 auto; }
.page-body--dark { background: #0B0E11; color: #ffffff; }

.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.packages__card { padding: 36px 32px; color: #0B0E11; }
.packages__name { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #0B5A84; margin-bottom: 14px; }
.packages__price { font-size: clamp(48px, 5vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; color: #C5351B; }
.packages__duration { font-size: 15px; color: #444a51; margin: 10px 0 22px; }
.packages__features { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.packages__features li { display: flex; gap: 12px; align-items: flex-start; }
.packages__features .diamond { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; }
.section-head { margin-bottom: 40px; }
.section-head__title { font-size: clamp(34px, 4vw, 58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 16px; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.project-card { display: block; }
.project-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.project-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card__body { padding: 22px 24px 26px; }
.project-card__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.project-card__sub { font-size: 15px; color: #444a51; margin-top: 8px; }

/* Block editor content ---------------------------------------------------- */
.prose { max-width: 760px; font-size: 18px; line-height: 1.65; color: #22272c; }
.page-body--dark .prose { color: rgba(255,255,255,0.86); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: #0B0E11; margin-top: 1.6em; }
.prose h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #0B0E11; margin-top: 1.4em; }
.page-body--dark .prose h2, .page-body--dark .prose h3 { color: #ffffff; }
.prose p.is-style-lead, .prose .is-style-lead { font-size: 22px; line-height: 1.55; color: #0B0E11; }
.page-body--dark .prose .is-style-lead { color: #ffffff; }
.prose a:not(.btn):not(.wp-element-button) { color: #0B5A84; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):not(.wp-element-button):hover { color: #C5351B; }
.prose ul:not(.svc-panel__list) { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prose ul:not(.svc-panel__list) > li { position: relative; padding-left: 24px; }
.prose ul:not(.svc-panel__list) > li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; background: #F5AB00; transform: rotate(45deg); }
.prose ol { padding-left: 1.3em; }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose blockquote { border-left: 4px solid #F5AB00; padding-left: 22px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.prose .wp-block-button__link, .prose .wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0; background: #F5AB00; color: #0B0E11; font: 700 15px/1 'Inter', system-ui, sans-serif; letter-spacing: .01em; text-decoration: none; transition: transform .25s, background .25s; }
.prose .wp-block-button__link:hover, .prose .wp-element-button:hover { background: #FFC233; transform: translateY(-2px); }
.prose .alignwide { max-width: 1180px; }
.prose .alignfull { max-width: none; }
.prose .wp-block-image figcaption { font-size: 14px; color: #444a51; margin-top: 8px; }
.page-body--dark .prose a:not(.btn):not(.wp-element-button) { color: #F5AB00; }

@media (max-width: 900px) {
  .page-body__inner { padding-top: 72px; padding-bottom: 88px; }
}

/* Logged in: keep the fixed header below the WordPress admin bar (visitors never see the bar). */
@media screen and (min-width: 783px) {
  .admin-bar .site-header { top: 32px; }
  .admin-bar .mobile-menu { top: 106px; }
}