/* Lorna Media Group — per Brand Guidelines 2026
   LACE #EDE8DF · STONE #C7C3BB · TAUPE #BBAC9D · CAMEL #8F7258 · SLATE #4B4D4A · CHARCOAL #232422
   Type: Inter — Regular body · Semibold labels · Extrabold subheads · Black display (tight, caps)
   Photography: editorial, desaturated, natural light */

:root{
  --lace:#EDE8DF;
  --stone:#C7C3BB;
  --taupe:#BBAC9D;
  --camel:#8F7258;
  --slate:#4B4D4A;
  --charcoal:#232422;
  --line:rgba(35,36,34,.15);
  --max:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
body{
  font-family:"Inter",system-ui,sans-serif;
  background:var(--lace);
  color:var(--charcoal);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--camel);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* type roles */
.label{
  font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--camel);
}
.display{
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
}
h2.sec-title{
  font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(30px,4.2vw,52px);margin:16px 0 20px;max-width:22ch;
}
.sub{font-weight:800;letter-spacing:0;line-height:1.25}
p.body{color:var(--slate);max-width:58ch}

/* editorial B&W photography */
.ph{filter:grayscale(1) contrast(1.02);transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.ph-frame{overflow:hidden;background:var(--stone)}
.ph-frame:hover .ph{transform:scale(1.035)}
.caption{
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-top:10px;
}

/* reveal on scroll — progressive: only hides when JS is confirmed running */
html.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- top strip ---------- */
.corridor{
  background:var(--charcoal);color:var(--lace);
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:9px 0;
}
.corridor .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.corridor b{color:var(--camel);font-weight:600}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--lace) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.01em;font-size:17px;text-transform:uppercase}
.logo .mark{width:22px;height:22px;border:3px solid var(--charcoal);border-radius:5px;position:relative;flex:none}
.logo .mark::after{content:"";position:absolute;right:-3px;top:-3px;width:9px;height:9px;background:var(--lace)}
.logo small{display:block;font-weight:600;font-size:9.5px;letter-spacing:.3em;color:var(--camel)}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{border-bottom-color:var(--camel)}
nav.main a[aria-current="page"]{border-bottom-color:var(--charcoal)}
.cta-btn{
  display:inline-block;background:var(--charcoal);color:var(--lace)!important;
  padding:13px 26px;text-decoration:none;font-weight:800;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--charcoal);
  transition:background .25s,color .25s;
}
.cta-btn:hover{background:var(--camel);border-color:var(--camel)}
.cta-btn.ghost{background:transparent;color:var(--charcoal)!important}
.cta-btn.ghost:hover{background:var(--charcoal);color:var(--lace)!important}
.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:9px 14px;font:600 12px/1 "Inter";letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--charcoal)}
@media(max-width:860px){
  nav.main{display:none;position:absolute;top:76px;left:0;right:0;background:var(--lace);
    flex-direction:column;align-items:flex-start;padding:22px 28px;gap:18px;border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  .menu-toggle{display:block}
}

/* ---------- hero (editorial split, like the guidelines cover) ---------- */
.hero{border-bottom:1px solid var(--line)}
.hero .split{display:grid;grid-template-columns:1.05fr .95fr;min-height:78vh}
.hero .copy{padding:88px 28px 72px;max-width:640px;margin-left:auto;width:100%;display:flex;flex-direction:column;justify-content:center}
.hero .copy{padding-left:max(28px,calc((100vw - var(--max))/2))}
.hero h1{font-size:clamp(52px,7vw,104px)}
.hero .lede{margin:30px 0 38px;font-size:17.5px;color:var(--slate);max-width:46ch}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .img{position:relative}
.hero .img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero .img .est{
  position:absolute;bottom:18px;right:22px;z-index:2;color:var(--lace);
  font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
}
@media(max-width:860px){
  .hero .split{grid-template-columns:1fr;min-height:0}
  .hero .img{height:52vw;min-height:280px}
  .hero .copy{padding:64px 28px 56px}
}

/* ---------- sections ---------- */
section{padding:84px 0}
.hairline{border-top:1px solid var(--line)}

/* charcoal anchor (mission) */
.anchor{background:var(--charcoal);color:var(--lace)}
.anchor .label{color:var(--camel)}
.anchor h2.sec-title{color:var(--lace);max-width:18ch}
.anchor p.body{color:var(--stone)}
.anchor .statement{
  margin-top:40px;padding-top:28px;border-top:1px solid rgba(237,232,223,.2);
  font-size:19px;line-height:1.6;color:var(--stone);max-width:62ch;
}

/* numbered architecture rows (guidelines p.05) */
.dim{display:grid;grid-template-columns:200px 90px 1fr;gap:32px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.dim:last-of-type{border-bottom:1px solid var(--line)}
.dim .ph-frame{aspect-ratio:4/3}
.dim .ph{width:100%;height:100%;object-fit:cover}
.dim .num{font-weight:900;font-size:44px;color:var(--camel);letter-spacing:-.02em}
.dim h3{font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.dim p{color:var(--slate);max-width:60ch;font-size:15.5px}
@media(max-width:760px){
  .dim{grid-template-columns:80px 1fr;gap:20px}
  .dim .ph-frame{display:none}
}

/* division cards — photo-led */
.grid{display:grid;gap:34px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.cols-4,.grid.cols-2{grid-template-columns:1fr}}
.dcard{text-decoration:none;display:block}

.dcard .ph{width:100%;height:100%;object-fit:cover}
.dcard .idx{font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--camel);margin:16px 0 6px;display:block}
.dcard h3{font-weight:800;font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  display:inline;background-image:linear-gradient(var(--camel),var(--camel));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s ease;padding-bottom:3px}
.dcard:hover h3{background-size:100% 2px}
.dcard p{color:var(--slate);font-size:14.5px;margin-top:10px;max-width:32ch}

/* services */
.svc{display:grid;grid-template-columns:190px 1fr;gap:36px;padding:44px 0;border-top:1px solid var(--line)}
.svc:last-of-type{border-bottom:1px solid var(--line)}
.svc .id{font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--camel);line-height:2}
.svc h3{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(20px,2.4vw,28px);line-height:1.1;margin-bottom:14px}
.svc p{color:var(--slate);max-width:64ch}
.svc .model{margin-top:16px;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--charcoal)}
.svc .model b{color:var(--camel);font-weight:600}
@media(max-width:720px){.svc{grid-template-columns:1fr;gap:10px}}

/* facts */
.facts{display:flex;gap:56px;flex-wrap:wrap;margin-top:44px}
.facts strong{font-weight:900;font-size:52px;display:block;line-height:1;letter-spacing:-.02em}
.facts span{font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.anchor .facts strong{color:var(--lace)}

/* mosaic (photography, guidelines p.07) */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mosaic .ph-frame{aspect-ratio:1/1;max-height:280px}
.mosaic .ph{width:100%;height:100%;object-fit:cover}
.mosaic .tall{grid-row:span 2}
.mosaic .tall.ph-frame{aspect-ratio:auto}
@media(max-width:700px){.mosaic{grid-template-columns:repeat(2,1fr)}}

/* timeline */
.timeline{display:grid;gap:0;margin-top:8px}
.timeline .t{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line)}
.timeline .t:last-child{border-bottom:1px solid var(--line)}
.timeline .yr{font-weight:900;font-size:26px;color:var(--camel);letter-spacing:-.02em}
.timeline h3{font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.timeline p{color:var(--slate);max-width:60ch;font-size:15.5px}
@media(max-width:600px){.timeline .t{grid-template-columns:1fr;gap:8px}}

/* values */
.values{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.values span{font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--taupe);padding:12px 18px;color:var(--slate)}
.values span b{color:var(--camel);font-weight:800}

/* work */
.work{display:grid;gap:40px;grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.work{grid-template-columns:1fr}}
.work article .ph-frame{aspect-ratio:16/10;max-height:230px}
.work article .ph{width:100%;height:100%;object-fit:cover}
.work article .tag{display:block;margin:18px 0 8px}
.work article h3{font-weight:800;font-size:19px;letter-spacing:.01em;text-transform:uppercase;line-height:1.25;margin-bottom:10px}
.work article p{color:var(--slate);font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr}}
form .field{margin-bottom:22px}
form label{display:block;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:9px;color:var(--charcoal)}
form input,form textarea{
  width:100%;padding:15px;border:1px solid var(--stone);background:#FFFDF9;
  font-family:inherit;font-size:16px;color:var(--charcoal);
}
form input:focus,form textarea:focus{outline:2px solid var(--camel);outline-offset:0;border-color:var(--camel)}
.info-block{margin-bottom:30px}
.info-block h3{font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--camel);margin-bottom:8px}
.info-block p{font-size:17px}
.info-block a{font-weight:800}

/* footer — "Let's build the system." back-cover treatment */
footer.site{background:var(--charcoal);color:var(--lace);padding:88px 0 36px}
footer.site .cta-block{padding-bottom:56px;border-bottom:1px solid rgba(237,232,223,.18)}
footer.site .cta-block .label{color:var(--camel)}
footer.site .cta-block h2{
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(44px,7vw,92px);margin:14px 0 30px;color:var(--lace);
}
footer.site .cols{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;padding:44px 0}
footer.site .cols .divs{font-size:14px;line-height:2.1;color:var(--stone)}
footer.site .cols b{display:block;font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--lace);margin-bottom:8px}
footer.site a{color:var(--lace)}
footer.site .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(237,232,223,.18);
  font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
footer.site .base b{color:var(--camel);font-weight:600}

/* evolution rows (About) */
.evo-row{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:baseline}
@media(max-width:640px){.evo-row{grid-template-columns:1fr;gap:8px}}

/* client roster */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px;border-top:1px solid var(--line)}
@media(max-width:820px){.roster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.roster{grid-template-columns:1fr}}
.roster .r{padding:26px 24px 26px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.roster .r:nth-child(3n){border-right:none}
@media(max-width:820px){.roster .r:nth-child(3n){border-right:1px solid var(--line)} .roster .r:nth-child(2n){border-right:none}}
@media(max-width:520px){.roster .r{border-right:none!important}}
.roster .r .nm{font-weight:800;font-size:16px;letter-spacing:.01em;margin-bottom:6px}
.roster .r .meta{font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--camel);margin-bottom:10px}
.roster .r p{font-size:14px;color:var(--slate);max-width:36ch}

/* video showcase */
.video-frame{margin-top:32px;background:#000;border:1px solid rgba(237,232,223,.2)}
.video-frame video{width:100%;height:auto;display:block}




/* ===== division cards: robust, no overlap ===== */
.grid.cols-4{align-items:start}
.dcard{display:flex;flex-direction:column}
.dcard .ph-frame{width:100%;height:300px;flex:none;overflow:hidden}
.dcard .ph{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.dcard .idx{margin-top:16px}
.dcard p{margin-top:10px;max-width:none}
@media(max-width:980px){.dcard .ph-frame{height:320px}}
@media(max-width:600px){.dcard .ph-frame{height:360px}}

/* ensure section that follows the divisions has clear separation */
section + section.anchor{margin-top:0}

/* work gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
@media(max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0}
.gallery .ph-frame{width:100%;height:300px;overflow:hidden}
.gallery .ph{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.gallery figcaption{margin-top:10px;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--camel)}