/* Tambrin AI website — shared styles (cinematic theme)
   Display: Bebas Neue · Accent: Instrument Serif italic · Body: Figtree */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#050B1C;--bg-2:#081230;--ink:#F2F0EB;--cream:#E9E4DA;
  --or:#FF6A1F;--or-2:#FF8A4C;--or-text:#FF7A33;
  --or-dim:rgba(255,106,31,.12);--or-line:rgba(255,106,31,.22);--or-faint:rgba(255,106,31,.035);
  --muted:#5F6A8A;--muted-2:#9AA3BC;
  --nav-fade:rgba(5,11,28,.97);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* ---- type scale ----------------------------------------------------
     One scale for the whole site. Before this the five pages used 72
     different font sizes, including 9 / 9.5 / 10 / 10.5 / 11px side by
     side and 36 separate clamp() ramps for headings. Sizes that close
     together read as a mistake rather than a hierarchy, so the scale is
     deliberately short: four text sizes and five heading steps, each a
     clear jump from the last. Use these, not raw px. */
  --fs-label:10px;        /* tracked uppercase eyebrows, tags, chips, meta */
  --fs-small:13px;        /* captions and small print */
  --fs-body:14.5px;       /* card and list body */
  --fs-lead:16.5px;       /* .intro and hero paragraphs */
  --fs-h4:clamp(19px,1.7vw,23px);
  --fs-h3:clamp(26px,2.5vw,34px);
  --fs-h2:clamp(34px,3.6vw,48px);
  --fs-h1:clamp(32px,3.9vw,56px);
  --fs-display:clamp(38px,5.4vw,80px);  /* page hero headlines, clocks, big numerals */
  --fs-ghost:clamp(64px,7.5vw,120px);  /* .page-num watermark only — never text */
}
[data-theme="light"]{
  --bg:#F5F3EE;--bg-2:#ECE8E0;--ink:#0B1A3A;--cream:#1B2A4F;
  --or-text:#D9530F;
  --or-dim:rgba(255,106,31,.08);--or-line:rgba(217,83,15,.24);--or-faint:rgba(255,106,31,.05);
  --muted:#8A90A3;--muted-2:#46526F;
  --nav-fade:rgba(245,243,238,.98);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:300 var(--fs-lead)/1.7 "Figtree",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
a{color:inherit}
::selection{background:var(--or);color:#050B1C}
:focus-visible{outline:1px solid var(--or);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.pad{padding-left:60px;padding-right:60px}

/* type */
.bebas{font-family:"Bebas Neue",sans-serif;font-weight:400;letter-spacing:.02em;line-height:.9}
.bebas em,.serif-em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--or-text)}
.tag{display:flex;align-items:center;gap:14px;font:500 var(--fs-label)/1 "Figtree",sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--or-text);margin-bottom:20px}
.tag::before{content:"";width:30px;height:1px;background:currentColor}
.intro{max-width:540px;margin-top:28px;font-size:var(--fs-lead);line-height:1.8;color:var(--muted-2);border-left:2px solid var(--or-line);padding-left:22px}
.intro strong{color:var(--ink);font-weight:500}

/* cursor */
.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;
  width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,106,31,.75);background:rgba(255,106,31,.07);
  opacity:0;transform-origin:center;transition:opacity .18s var(--ease),scale .18s var(--ease);scale:.55}
.cur-ring.on{opacity:1;scale:1}
@media (hover:none),(max-width:900px),(prefers-reduced-motion:reduce){.cur-ring{display:none}}

/* nav */
nav.top{position:fixed;inset:0 0 auto;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,30px);padding:26px clamp(20px,4vw,60px);background:linear-gradient(to bottom,var(--nav-fade),transparent);transition:padding .3s,background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.top.scrolled{padding:16px clamp(20px,4vw,60px);background:var(--nav-fade);border-bottom-color:var(--or-line)}
@media (min-width:1041px) and (hover:hover){nav.top.scrolled{background:var(--nav-fade);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
.logo{display:block;width:182px;height:17px;background:url(tambrin-white.png) left center/contain no-repeat}
[data-theme="light"] .logo{background-image:url(tambrin-navy.png)}
.nav-links{display:flex;gap:clamp(14px,2.4vw,40px);list-style:none;align-items:center}
.nav-links a{font-size:clamp(9px,.85vw,10px);letter-spacing:clamp(.08em,.16vw,.2em);white-space:nowrap;text-transform:uppercase;color:var(--muted-2);text-decoration:none;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--or-text)}
.nav-right{display:flex;align-items:center;gap:14px}
.theme{width:36px;height:36px;border:1px solid var(--or-line);background:none;color:var(--muted-2);cursor:pointer;display:grid;place-items:center;transition:color .25s,border-color .25s}
.theme:hover{color:var(--or-text);border-color:var(--or)}
.theme .sun{display:none}
[data-theme="light"] .theme .sun{display:block}
[data-theme="light"] .theme .moon{display:none}
.nav-cta{font:500 var(--fs-label)/1 "Figtree",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:12px 24px;border:1px solid var(--or-line);color:var(--or-text);background:transparent;cursor:pointer;text-decoration:none;transition:background .25s,color .25s}
.nav-cta:hover{background:var(--or);color:#050B1C}

/* buttons */
.btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;font:500 var(--fs-label)/1 "Figtree",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:17px 38px;background:var(--or);color:#050B1C;border:0;cursor:pointer;text-decoration:none;box-shadow:0 8px 28px rgba(255,106,31,.28);transition:transform .2s,box-shadow .2s}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,106,31,.4)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;font:500 var(--fs-label)/1 "Figtree",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);text-decoration:none;background:none;border:0;cursor:pointer;transition:color .25s}
.btn-ghost:hover{color:var(--ink)}
.btn-ghost span{display:inline-block;transition:transform .25s}
.btn-ghost:hover span{transform:translateX(6px)}

/* atmosphere */
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--or-faint) 1px,transparent 1px),linear-gradient(90deg,var(--or-faint) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,#000 20%,transparent 100%);pointer-events:none}
.glow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(255,106,31,.09) 0%,transparent 65%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.divider{height:1px;background:linear-gradient(to right,transparent,var(--or-line),transparent)}
.page-num{position:absolute;top:120px;right:60px;font:400 var(--fs-ghost)/1 "Bebas Neue",sans-serif;color:var(--or);opacity:.05;user-select:none;pointer-events:none}

/* hairline card grids */
.hairgrid{display:grid;gap:1px;background:var(--or-line);border:1px solid var(--or-line)}
.hcard{position:relative;overflow:hidden;background:var(--bg);padding:42px 36px;transition:background .3s}
.hcard::after{content:"";position:absolute;inset:0;background:var(--or-faint);pointer-events:none}
.hcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--or),transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hcard:hover{background:var(--bg-2)}
.hcard:hover::before{transform:scaleX(1)}

/* contact strip */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;padding-top:79px;padding-bottom:79px;position:relative;overflow:hidden;border-top:1px solid var(--or-line)}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 80% 50%,rgba(255,106,31,.07),transparent);pointer-events:none}
.contact h3{font-size:var(--fs-h1)}
.contact .left p{margin-top:20px;font-size:var(--fs-lead);line-height:1.75;color:var(--muted-2);max-width:420px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{font:500 var(--fs-label)/1 "Figtree",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--or-line);color:var(--muted-2)}
.chips span:first-child{color:var(--or-text);border-color:var(--or)}
.form{display:flex;flex-direction:column;gap:14px;position:relative}
.field{background:var(--or-dim);border:1px solid var(--or-line);padding:15px 20px;font:300 var(--fs-body)/1.5 "Figtree",sans-serif;color:var(--ink);outline:none;width:100%;transition:border-color .25s,background .25s;border-radius:0}
.field::placeholder{color:var(--muted)}
.field:focus{border-color:var(--or)}
textarea.field{resize:vertical;min-height:120px;font-family:"Instrument Serif",serif;font-style:italic;font-size:var(--fs-h4);line-height:1.45}
select.field{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
select.field option{background:var(--bg);color:var(--ink)}
.form .btn-primary{align-self:flex-start;margin-top:6px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .sendfail{grid-column:1/-1;font-size:var(--fs-body);color:var(--or-text)}
.form .sendfail a{color:inherit}
.form .sent{display:none;padding:28px;border:1px solid var(--or-line);background:var(--or-dim)}
.form.done>*:not(.sent){display:none}
.form.done .sent{display:block}
.form .sent h4{font:400 var(--fs-h2)/1 "Bebas Neue",sans-serif;letter-spacing:.02em}
.form .sent p{margin-top:10px;color:var(--muted-2)}

footer.foot{padding-top:36px;padding-bottom:36px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--or-line)}
footer.foot p{font-size:var(--fs-small);color:var(--muted);letter-spacing:.06em}
footer.foot .links{display:flex;flex-wrap:wrap;gap:14px 30px}
footer.foot .links a{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .25s}
footer.foot .links a:hover{color:var(--or-text)}

/* motion */
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.load{opacity:0;animation:up .8s var(--ease) forwards}
.l1{animation-delay:.1s}.l2{animation-delay:.25s}.l3{animation-delay:.4s}.l4{animation-delay:.55s}.l5{animation-delay:.7s}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
.scroll-hint{position:absolute;bottom:40px;right:60px;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;opacity:0;animation:fadeIn .8s 1.2s forwards}
.scroll-hint::before{content:"";width:1px;height:54px;background:linear-gradient(to bottom,transparent,var(--or))}

@media (max-width:1040px){
  .pad{padding-left:24px;padding-right:24px}
  nav.top,nav.top.scrolled{padding:14px clamp(16px,4vw,24px)}
  nav.top{flex-wrap:wrap;row-gap:12px}
  .nav-links{display:flex;order:3;width:100%;gap:clamp(10px,3vw,26px);justify-content:space-between}
  .nav-links a{font-size:clamp(8.5px,2.3vw,10px);letter-spacing:clamp(.05em,.3vw,.16em)}
  nav.top.scrolled .nav-links{display:none}   /* a compact bar once you are reading */
  .nav-links a{font-size:var(--fs-label)}
  .nav-cta{padding:10px 14px;font-size:0;white-space:nowrap;letter-spacing:.12em}
  .nav-cta::after{content:"Book a call";font-size:var(--fs-label)}
  .logo{width:150px;height:14px}
  .nav-right{gap:8px}
  .theme{width:32px;height:32px}
  .page-num,.scroll-hint{display:none}
  .contact{grid-template-columns:1fr;gap:40px;padding-top:58px;padding-bottom:58px}
  footer.foot{flex-direction:column;text-align:center}
}
@media (max-width:620px){
  .nav-links a{font-size:0}                       /* the short name replaces the long one */
  .nav-links a::after{content:attr(data-short);font-size:clamp(9px,2.7vw,11px)}
  .grain{display:none}                            /* a full-viewport overlay is not worth it on a phone */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}
  .load,.reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}