/* Studio.TemnomeroFF — bespoke website, aligned page grid and animated rules
   All main illustration filenames remain exactly as supplied.
   Brand colours, effects, responsive layout and footer are controlled here. */
:root {
  --olive:#2d402b;
  --olive-soft:#596a4f;
  --olive-deep:#34452d;
  --bronze:#a6763e;
  --bronze-light:#d6b88d;
  --ink:#2b2722;
  --paper:#f8f2e6;
  --paper-light:#fffaf2;
  --shadow:rgba(79,59,32,.13);
  /* A common left-hand guide for brand, introduction and first card. */
  --content-gutter:clamp(24px,5.5vw,90px);
  --card-inset:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#eee7d9;font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto}
.site-shell{max-width:1800px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--paper) url('../IMAGES/CREATIVE_STRATEGY_2.png') center top/cover fixed no-repeat;box-shadow:0 0 0 1px rgba(85,78,65,.14)}
/* Header */
/* The olive separator is continuous. A CSS-drawn disc travels along it
   between navigation items; its horizontal position is set by menu.js. */
.site-header{position:relative;z-index:20;background:rgba(255,251,244,.88);border-bottom:2px solid rgba(66,83,52,.78);box-shadow:0 2px 4px rgba(29,45,28,.17)}
.site-header::after{content:"";position:absolute;left:var(--nav-dot-position,50%);bottom:-7px;width:13px;height:13px;border:2px solid var(--olive-soft);border-radius:50%;background:var(--paper-light);box-shadow:0 0 0 1px rgba(255,248,226,.42);transform:translateX(-50%);opacity:0;pointer-events:none;transition:left .30s cubic-bezier(.22,.64,.28,1),opacity .15s ease;z-index:5}
.site-header.nav-indicator-ready::after{opacity:1}
/* Bottom edges of the brand and navigation share a baseline. */
.header-inner{height:98px;padding:0 var(--content-gutter) 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
/* Lower the visual logo to the navigation baseline and compensate for a few
   transparent pixels around the supplied PNG. This does not move the menu. */
.brand{display:block;flex:0 1 auto;line-height:0;transform:translate(-3px,clamp(16px,1.8vw,27px))}
.brand img{display:block;width:clamp(295px,29vw,455px);height:auto;filter:drop-shadow(0 2px 2px rgba(46,52,31,.12))}
.primary-navigation{display:flex;align-items:center;gap:clamp(22px,3vw,51px);white-space:nowrap}
.primary-navigation a{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(17px,1.45vw,22px);line-height:1.12;text-decoration:none;color:#49352b;padding:0 1px;transition:color .2s}
.primary-navigation a:hover,.primary-navigation a:focus-visible{color:#8b5e2c}
.primary-navigation a[aria-current="page"]{color:#49352b}
.menu-toggle{display:none}
/* Home introduction */
.home-main{flex:1;position:relative;overflow:hidden}
.intro-section{position:relative;isolation:isolate;min-height:330px;padding:29px var(--content-gutter) 18px}
/* Anchor the abstract watercolour to the TOP of the service-card row.
   The reduced graphic ends at the introduction's bottom edge instead of
   continuing down behind the service cards. */
.intro-ornament{position:absolute;width:clamp(310px,30vw,485px);height:auto;right:0;bottom:0;top:auto;pointer-events:none;z-index:-1;opacity:.85}
.intro-copy{position:relative;z-index:1;width:min(780px,60%)}
.intro-copy h1{font-family:Georgia,'Times New Roman',serif;margin:0 0 13px;color:#303e23;font-size:clamp(20px,1.75vw,27px);letter-spacing:.24em;text-transform:uppercase;line-height:1.19;font-weight:700}
.intro-copy p{font-size:clamp(15px,1.18vw,19px);line-height:1.22;letter-spacing:.085em;margin:0 0 13px}
/* Four service panels */
/* Card frame sits to the left of the shared guide; its INNER copy aligns
   exactly with the brand and introduction, instead of being separately nudged. */
.services-preview{position:relative;z-index:2;padding:0 calc(var(--content-gutter) - var(--card-inset) - 1px) 34px}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;align-items:stretch}
.service-card{background:linear-gradient(180deg,rgba(255,251,243,.93),rgba(255,248,236,.83));border:1px solid rgba(179,126,61,.54);border-radius:15px;box-shadow:0 3px 8px var(--shadow);padding:14px var(--card-inset) 10px;min-height:456px;display:flex;flex-direction:column;overflow:hidden;transition:transform .23s ease,box-shadow .23s ease}
.service-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(79,59,32,.18)}
.service-card h2{padding-left:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;font-size:clamp(21px,2vw,31px);line-height:1.1;white-space:nowrap;letter-spacing:-.015em;color:#35442d;margin:0 0 9px}
.service-card h2 a{text-decoration:none}
.service-card h2 a:hover,.service-card h2 a:focus-visible{color:#94632f;text-decoration:underline;text-underline-offset:5px}
/* No decorative image: the rule and mobile disc are 100% CSS.
   --dot-x is updated by js/menu.js as the pointer travels across a card. */
.card-rule{position:relative;display:block;width:100%;height:14px;margin:0 0 8px;background:linear-gradient(90deg,rgba(166,118,62,.87),rgba(63,84,55,.9)) center/100% 1px no-repeat;--dot-x:0px}
.card-rule::before{content:"";position:absolute;z-index:1;top:50%;left:var(--dot-x);width:11px;height:11px;transform:translate(-50%,-50%);border:1.5px solid var(--bronze);border-radius:50%;background:#fffaf0;box-shadow:0 0 0 2px rgba(255,249,238,.8);transition:left .34s cubic-bezier(.22,.64,.28,1),border-color .2s}
.service-card:hover .card-rule::before,.service-card:focus-within .card-rule::before{border-color:var(--olive-soft)}
/* With JS unavailable the dot still moves to the far end on hover. */
@media(hover:hover){.service-card:hover .card-rule:not([data-pointer-active]){--dot-x:calc(100% - 3px)}}
.service-card p{font-size:clamp(13px,1.05vw,16.8px);line-height:1.26;letter-spacing:.055em;margin:5px 0 3px;min-height:76px}
.service-art-link{display:flex;margin-top:auto;align-items:end;justify-content:center;text-decoration:none;min-height:0}
.service-art{display:block;object-fit:contain;object-position:bottom center;width:100%;height:auto;max-height:270px;transition:transform .22s ease}
.service-art-link:hover .service-art,.service-art-link:focus-visible .service-art{transform:scale(1.025)}
/* Footer is CSS only: colour, graduated shading and rules */
.site-footer{z-index:3;position:relative;border-top:2px solid #bd9559;min-height:56px;background:linear-gradient(180deg,#899073 0%,#687757 25%,#46573e 80%,#30442e 100%);box-shadow:inset 0 2px 0 rgba(255,255,242,.28),inset 0 -1px 0 rgba(36,51,27,.6);color:#f7f1e6}
.site-footer::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:rgba(242,231,205,.36)}
.footer-inner{min-height:56px;padding:13px clamp(24px,5.5vw,90px);display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:Georgia,'Times New Roman',serif;font-size:13px;letter-spacing:.025em}
/* About, Services and Contact retain the same identity */
.inner-main{position:relative;overflow:hidden;flex:1;min-height:70vh;padding:69px clamp(28px,7vw,110px) 100px}
.interior-ornament{position:absolute;right:-35px;top:22px;width:min(55vw,680px);opacity:.62;pointer-events:none}
.interior-content{position:relative;z-index:1;width:min(720px,100%);margin:0 auto}
.interior-content-wide{width:min(1230px,100%)}
.eyebrow{font-size:13px!important;text-transform:uppercase;letter-spacing:.22em!important;color:var(--bronze)!important;font-weight:700}
.interior-content h1{font:normal italic clamp(36px,4vw,57px)/1.15 Georgia,'Times New Roman',serif;color:var(--olive);margin:5px 0 15px}
.interior-content p{font-size:18px;line-height:1.6;margin:0 0 21px;max-width:760px}
.heading-rule{width:min(430px,100%);height:2px;background:linear-gradient(90deg,var(--bronze),rgba(165,119,62,0));margin:19px 0 31px}
.quiet-link{display:inline-block;margin-top:15px;color:var(--olive);font:italic 20px Georgia,serif;text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:4px}
.quiet-link:hover,.quiet-link:focus-visible{color:var(--bronze)}
.contact-placeholder{font-style:italic;color:#6a665c}
.services-lead{margin-bottom:40px!important}
.services-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.detail-card{scroll-margin-top:25px;display:flex;align-items:center;gap:20px;padding:16px;background:rgba(255,251,242,.78);border:1px solid rgba(170,116,52,.4);border-radius:14px;box-shadow:0 3px 8px var(--shadow)}
.detail-card img{width:43%;object-fit:contain;flex:0 0 43%}
.detail-copy h2{font:italic 27px Georgia,serif;color:var(--olive);margin:0 0 10px}
.detail-copy p{font-size:16px;line-height:1.45;margin:0}
/* Responsive widths */
@media(min-width:1600px){.intro-section{min-height:344px}.service-card{min-height:505px}.service-art{max-height:300px}}
@media(max-width:1250px){
 :root{--content-gutter:4vw;--card-inset:16px}
 .header-inner{height:83px;padding:0 var(--content-gutter) 17px}
 .brand img{width:clamp(260px,30vw,380px)}
 .primary-navigation{gap:23px}
 .primary-navigation a{font-size:19px}
 .intro-section{min-height:320px;padding-left:var(--content-gutter);padding-right:var(--content-gutter)}
 .intro-copy{width:63%}
 .intro-copy h1{letter-spacing:.18em}
 .intro-copy p{font-size:15px;line-height:1.28}
 .services-preview{padding-left:calc(var(--content-gutter) - var(--card-inset) - 1px);padding-right:calc(var(--content-gutter) - var(--card-inset) - 1px)}
 .service-card{padding:13px var(--card-inset) 9px;min-height:415px}
 .service-card h2{font-size:clamp(20px,2vw,27px)}
 .service-card p{font-size:13px;letter-spacing:.02em;min-height:73px}
 .service-art{max-height:245px}
}
@media(max-width:860px){
 .header-inner{height:76px;padding:0 22px;align-items:center}
 .brand img{width:min(54vw,375px)}
 .brand{transform:translate(-2px,2px)}
 .site-header::after{display:none}
 .menu-toggle{display:flex;flex-direction:column;justify-content:space-between;width:43px;height:39px;padding:10px 8px;border:1px solid rgba(166,118,62,.65);background:rgba(255,252,246,.7);border-radius:5px;cursor:pointer}
 .menu-toggle span{width:100%;height:2px;background:var(--olive);border-radius:5px}
 .primary-navigation{display:none;position:absolute;top:100%;right:10px;left:10px;padding:10px 20px 15px;background:#fffaf0;border:1px solid rgba(166,118,62,.6);box-shadow:0 10px 20px var(--shadow);flex-direction:column;align-items:stretch;gap:0}
 .primary-navigation.is-open{display:flex}
 .primary-navigation a{font-size:22px;padding:12px 4px;border-bottom:1px solid rgba(163,123,75,.25)}
 .primary-navigation a[aria-current="page"]{color:var(--bronze)}
 .intro-section{min-height:unset;padding:27px 5% 28px}
 .intro-copy{width:min(650px,90%)}
 .intro-ornament{width:clamp(290px,48vw,410px);right:-48px;bottom:0;top:auto;opacity:.33}
 .intro-copy h1{font-size:23px;letter-spacing:.12em}
 .intro-copy p{font-size:16px;letter-spacing:.045em;line-height:1.38}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .service-card{min-height:435px;padding:17px}
 .service-card h2{font-size:clamp(23px,3.5vw,31px)}
 .service-card p{font-size:15px;min-height:70px}
 .service-art{max-height:255px}
 .services-detail-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .brand img{width:min(73vw,302px)}
 .header-inner{gap:9px;padding:0 13px;height:71px}
 .intro-section{padding:24px 21px 14px}
 .intro-copy{width:100%}
 .intro-copy h1{font-size:20px;letter-spacing:.085em;margin-bottom:13px}
 .intro-copy p{font-size:15px;letter-spacing:.018em;line-height:1.42;margin-bottom:12px}
 .intro-ornament{width:320px;bottom:0;top:auto;right:-140px;opacity:.18}
 .services-preview{padding:8px 18px 25px}
 .service-grid{grid-template-columns:1fr;gap:16px}
 .service-card{min-height:unset;padding:15px 20px 8px}
 .service-card h2{font-size:29px;margin-bottom:2px;padding-left:0}
 .service-card p{font-size:15px;min-height:unset;margin:5px 0 0}
 .service-art{max-height:300px}
 .footer-inner{flex-direction:column;justify-content:center;gap:4px;text-align:center;font-size:12px;padding:10px 12px}
 .inner-main{padding:42px 24px 70px}
 .interior-ornament{width:350px;right:-130px;opacity:.2}
 .interior-content p{font-size:16px}
 .detail-card{display:block}
 .detail-card img{width:100%;max-height:270px}
 .detail-copy h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}