/* Larsen Limited — larsen.limited apex.
   Production styles, externalised so the page runs under a self-only CSP with
   no 'unsafe-inline'. Self-hosted fonts, no third-party request of any kind.
   Only the faces this page renders are shipped: Josefin Sans 300/400 and
   JetBrains Mono 400 — the same set Hearth carries, copied from it. */

/* ── Self-hosted faces ──────────────────────────────────────────────────── */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/josefin-sans-300-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;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/josefin-sans-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/josefin-sans-400-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;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/josefin-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-mono-400-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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── Tokens ─────────────────────────────────────────────────────────────
   Brand colours read from the vector source (all-logos-vector.ai), not
   sampled from pixels. The four are Larsen Limited's four divisions. */
:root{
  --ll-orange:#F47722;   /* We can solve IT. */
  --ll-blue:#4156A6;     /* Marketing.       */
  --ll-teal:#0DAF9F;     /* Branding.        */
  --ll-yellow:#FEBB1A;   /* Media.           */
  --ff-cyan:#5DDFFF;     /* fireFly's mark   */

  --ground:#0A0908; --panel:#151111; --edge:#33291F;
  --ink:#F3EEE8; --ink-2:#B5AAA0; --ink-3:#7C7169; --ink-4:#5E554F;

  --sans:'Josefin Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0; padding:0; box-sizing:border-box;}
html,body{height:100%;}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); overflow:hidden;}

/* ── The comet field ────────────────────────────────────────────────────
   Plain canvas 2D. No WebGL, no Three.js, no vendored library — the field
   is 60 lines of arithmetic, so the dependency does not exist. */
#field{position:fixed; inset:0; background:var(--ground);}
#field canvas{display:block; width:100%; height:100%;}

/* ── Poster: metadata in the corners, wordmark carrying the centre ─────── */
.hero{position:fixed; inset:0; display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(20px,4vmin,46px) clamp(22px,5vmin,64px);}
.h-row{display:flex; justify-content:space-between; align-items:flex-start; gap:18px;}
.h-row.bottom{align-items:flex-end;}
.meta{font-family:var(--mono); font-size:clamp(9px,1.05vw,12px);
  letter-spacing:.07em; line-height:1.8; color:var(--ink-2);
  text-shadow:0 0 6px rgba(10,9,8,.9);}
.meta.dim{color:var(--ink-3); text-align:right;}

.centre{display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:clamp(12px,2.1vmin,22px); padding-left:clamp(4px,3vw,40px);}
/* The tagline lives INSIDE the artwork — never set a second one in type. */
.wordmark{display:block; width:min(46vw,760px); height:auto; color:var(--ll-orange);}

.powered{display:flex; align-items:center; gap:.5em; font-weight:300;
  font-size:clamp(15px,1.85vw,22px); letter-spacing:.02em; color:var(--ink-2);
  text-shadow:0 0 6px rgba(10,9,8,.9);}
.powered .ff{display:inline-flex; align-items:center; font-weight:300;
  letter-spacing:-.02em; line-height:.85; font-size:2.4em; color:var(--ink);}
.powered .orb{width:.36em; height:.36em; border-radius:50%; background:var(--ff-cyan);
  box-shadow:0 0 .28em var(--ff-cyan),0 0 .7em rgba(93,223,255,.3);
  margin-right:.2em; transform:translateY(-.12em); flex:none;
  animation:orb 3.6s ease-in-out infinite;}
@keyframes orb{0%,100%{opacity:1;transform:translateY(-.12em) scale(1);}
               50%{opacity:.5;transform:translateY(-.12em) scale(.5);}}

.divs{font-family:var(--mono); font-size:clamp(9px,1.05vw,12px); letter-spacing:.14em;
  text-shadow:0 0 6px rgba(10,9,8,.9);}
.divs .sep{color:#5A4F47;}
.d-tech{color:var(--ll-orange);} .d-mkt{color:#5C74C4;}
.d-brand{color:var(--ll-teal);} .d-media{color:var(--ll-yellow);}

/* ── Contact us — the page's one door ───────────────────────────────────── */
.cta{font-family:var(--mono); font-size:clamp(10px,1.0vw,12px); letter-spacing:.14em;
  text-transform:uppercase; color:#0B0908; background:var(--ll-orange);
  border:0; border-radius:3px; padding:clamp(10px,1.2vmin,14px) clamp(16px,2vmin,24px);
  cursor:pointer; font-weight:500; line-height:1; flex:none;
  transition:background .15s ease, transform .15s ease;}
.cta:hover{background:#FF8B3D; transform:translateY(-1px);}
.cta:focus-visible{outline:2px solid var(--ff-cyan); outline-offset:3px;}

/* ── The contact sheet ──────────────────────────────────────────────────── */
.sheet{position:fixed; inset:0; z-index:10; display:none; place-items:center;
  padding:clamp(16px,4vmin,48px); background:rgba(6,5,5,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.sheet[data-open="1"]{display:grid;}
.panel{width:min(560px,100%); max-height:100%; overflow:auto;
  background:var(--panel); border:1px solid var(--edge); border-radius:5px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);}
/* The four divisions as the panel's own edge — the brand system used
   structurally rather than decoratively. */
.panel-rule{display:flex; height:4px;}
.panel-rule i{flex:1; display:block;}
.panel-rule .r1{background:var(--ll-orange);} .panel-rule .r2{background:var(--ll-blue);}
.panel-rule .r3{background:var(--ll-teal);}   .panel-rule .r4{background:var(--ll-yellow);}

.panel-in{padding:clamp(22px,3.4vmin,34px);}
.panel-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.panel-head .sym{width:30px; height:auto; color:var(--ll-orange); flex:none; display:block;}
.panel-head h2{font-weight:400; font-size:clamp(20px,2.4vmin,26px); letter-spacing:.01em; line-height:1.15;}
.panel-sub{font-weight:300; font-size:clamp(14px,1.7vmin,16px); color:var(--ink-2);
  margin-bottom:24px; line-height:1.55; max-width:46ch;}

.fld{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.fld label{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);}
.fld label .opt{color:var(--ink-4); letter-spacing:.06em;}
.fld input,.fld textarea{font-family:var(--sans); font-weight:300; font-size:16px;
  color:var(--ink); background:#0D0A0A; border:1px solid var(--edge); border-radius:3px;
  padding:12px 13px; width:100%; transition:border-color .15s ease;}
.fld textarea{resize:vertical; min-height:104px; line-height:1.55;}
.fld input:focus,.fld textarea:focus{outline:0; border-color:var(--ll-orange);}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4);}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

.panel-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px;}
.send{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#0B0908; background:var(--ll-orange); border:0; border-radius:3px;
  padding:13px 26px; cursor:pointer; font-weight:500; line-height:1;}
.send:hover{background:#FF8B3D;}
.send[disabled]{opacity:.55; cursor:default;}
.send:focus-visible,.closex:focus-visible{outline:2px solid var(--ff-cyan); outline-offset:3px;}
.closex{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:transparent; border:0; cursor:pointer; padding:8px;}
.closex:hover{color:var(--ink);}

/* Status line — says what actually happened, never a false success. */
.status{font-family:var(--mono); font-size:11px; letter-spacing:.05em; line-height:1.7;
  margin-top:16px; min-height:1.7em;}
.status.ok{color:var(--ll-teal);}
.status.err{color:#E0714E;}
.status.pending{color:var(--ink-3);}

@media (max-width:620px){
  .h-row{flex-direction:column; gap:8px;}
  .meta.dim{text-align:left;}
  .h-row.bottom{flex-direction:column-reverse; align-items:flex-start; gap:16px;}
  .wordmark{width:82vw;}
}
@media (max-width:520px){ .two{grid-template-columns:1fr; gap:0;} }

/* Reduced motion: the field freezes to a single still frame (in JS) and the
   fireFly orb stops breathing. */
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }