/* * Gunma — front-end stylesheet. * * Ported from gunma-templates-news (src/base.css + src/components.css). * * The :root block below holds the template's own values and is the single source of the * defaults: it must stay here, or every var() in this file resolves to nothing and the * page renders unstyled on a white ground. Theme Options prints a SECOND :root block * inline after this file, carrying only the tokens the client has actually changed, so * retuning the palette never means editing CSS. * * Do not edit dist/assets/css/style.css in the template folder and expect it here; that * file is the static preview's build output and nothing reads it at runtime. */ /* ============================================================ BASE */ :root{ color-scheme: dark; --ink:#0a1422; /* deepest navy */ --navy:#0f1d30; /* section ground */ --panel:#13243a; /* cards */ --line:#24384f; /* hairlines */ --gold:#c6a15b; /* brass accent */ --gold-soft:#e0c58f; --text:#e8e3d8; /* warm ivory text */ --muted:#9aa7b6; --paper:#ece8df; /* light "about" section */ --paper-ink:#142236; --paper-muted:#566377; --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif; --sans:"Manrope", "Segoe UI", system-ui, sans-serif; --wrap:1180px; /* The page rhythm, named once. Sync Padding & Margin on an Elementor container reads these same two, so a change here reaches the builder pages instead of leaving them pinned to numbers copied out of this file. */ --gutter:24px; --band:88px; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* The browser default picks its own blue and leaves dark text on it unreadable here. */ ::selection{background:var(--gold);color:#0a1422} ::-moz-selection{background:var(--gold);color:#0a1422} body{margin:0;background:var(--ink);color:var(--text);font:15px/1.65 var(--sans);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance;margin:0;line-height:1.08} .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600} .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--gold);transition:background .2s,color .2s} .btn-gold{background:var(--gold);color:var(--ink)} .btn-gold:hover{background:var(--gold-soft)} .btn-ghost{color:var(--text);border-color:transparent;padding-inline:4px} .btn-ghost:hover{color:var(--gold)} .btn-line{color:var(--text);border-color:var(--line)} .btn-line:hover{border-color:var(--gold);color:var(--gold)} .arrow{transition:transform .2s} a:hover .arrow{transform:translateX(4px)} /* ---------- Header ---------- */ .topbar{background:#07101b;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)} .topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap} .topbar b{color:var(--gold-soft);font-weight:600} header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(10,20,34,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} header.site > .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px} .logo{display:flex;align-items:center;gap:12px} .logo svg{flex:none} .logo img{display:block;height:var(--logo-h,42px);width:auto;max-width:min(60vw,240px);object-fit:contain} .logo-name{font-family:var(--serif);font-size:26px;letter-spacing:.14em;line-height:1} .logo-sub{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--gold);margin-top:4px;font-family:var(--sans);font-weight:600} nav.main{display:flex;align-items:center;gap:30px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600} nav.main > a,.mega-toggle{padding-block:6px;border-bottom:1px solid transparent;color:#cfd6df} nav.main > a:hover,nav.main > a.on{color:var(--text);border-color:var(--gold)} /* ---------- Mega menu ---------- */ .mega-toggle{background:none;border-top:0;border-inline:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;padding-inline:0} .mega-toggle .chev{transition:transform .2s} .has-mega:hover .mega-toggle,.has-mega.open .mega-toggle{color:var(--text);border-color:var(--gold)} .has-mega:hover .chev,.has-mega.open .chev{transform:rotate(180deg)} .mega{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.55);text-transform:none;letter-spacing:normal;font-weight:400;font-size:14px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s} .mega::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px} .has-mega:hover .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:none} .mega-inner{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:40px;padding-block:36px 32px} .mega-col h3{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:600;color:var(--text);padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line)} .mega-col h3 svg{flex:none;color:var(--gold)} /* The heading stays put under the cursor; only its colour answers. */ .mega-col h3 a{transition:color .15s} .mega-col h3 a:hover{color:var(--gold)} .mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .mega-col a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;color:#b7c1cd;transition:color .15s,padding .15s} .mega-col a .arrow{opacity:0;color:var(--gold)} .mega-col ul a:hover{color:var(--gold-soft);padding-left:6px} .mega-col a:hover .arrow{opacity:1} .mega-feature{background:var(--panel);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:12px} .mega-feature h3{font-size:26px;font-weight:600} .mega-feature p{margin:0;color:var(--muted);font-size:13.5px} .mega-feature .hotline{font-family:var(--serif);font-size:24px;color:var(--gold-soft);font-variant-numeric:tabular-nums} /* Two actions at the foot of the panel, in a column narrower than the label they carry, so they hold one line on their own tracking rather than breaking mid-phrase. */ .mega-feature .actions{display:grid;gap:10px;margin-top:auto} .mega-feature .btn{justify-content:center;white-space:nowrap;letter-spacing:.07em;padding-inline:14px} .mega-foot{border-top:1px solid var(--line)} .mega-foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:14px;font-size:12px;color:var(--muted)} .mega-foot a{color:var(--gold);font-weight:600} .menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:5px;line-height:0;cursor:pointer} .menu-btn svg{display:block;fill:currentColor} .menu-btn .bar{transform-box:fill-box;transform-origin:center;transition:transform .25s cubic-bezier(.2,.7,.2,1)} .menu-btn[aria-expanded="true"] .bar-t{transform:translateY(4px) rotate(45deg)} .menu-btn[aria-expanded="true"] .bar-b{transform:translateY(-4px) rotate(-45deg)} .menu-btn:hover{border-color:var(--gold);color:var(--gold)} @media (prefers-reduced-motion: reduce){.menu-btn .bar{transition:none}} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--ink)} /* The photograph carries the whole band, so the copy needs a scrim dark enough to read against at the left and thin enough at the right to leave the skyline visible. */ .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 34%;pointer-events:none} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 4%,rgba(10,20,34,.9) 46%,rgba(10,20,34,.5) 100%)} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,640px);padding-block:118px 104px} /* The margin was an inline style on the template's own h1; it lives here now so the heading widget lands in the same place. */ .hero h1{font-size:clamp(44px,6.4vw,82px);letter-spacing:-.01em;margin-top:18px} .hero h1 em{font-style:italic;color:var(--gold)} .hero p.lead{max-width:48ch;color:#c4ccd6;font-size:16.5px;margin:26px 0 0} /* The row itself, wherever it is used — a Buttons widget is not always in a hero. The space above it is hero-specific and stays with the hero rules. */ .ctas{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center} .hero .ctas{margin-top:34px} .assure{display:flex;gap:12px;align-items:center;margin-top:34px;font-size:12.5px;color:var(--muted);max-width:44ch} .assure svg{flex:none} /* A photograph is busier than the drawn skyline it replaced, so the caption gets a scrim of its own instead of sitting straight on the image. */ /* ---------- Facts strip ---------- */ .facts{background:var(--navy);border-block:1px solid var(--line);--fact-pad:18px} /* The grid is pulled out by the cell padding, so the first and last column's text still lands on the page gutter whatever the column count is. */ .facts .wrap{display:grid;grid-template-columns:repeat(5,1fr);position:relative; padding-inline:calc(var(--gutter) - var(--fact-pad))} /* Each cell draws its own left and top rule as a shadow rather than a border, so adding one cannot change the height of the band or the width of a column. The rule above row one lands on the band's own top border and disappears into it; the one left of column one is covered by a strip down the edge. Column one begins every row, so that single strip is enough — at any column count, over any number of rows, which is why there are no :nth-child() resets here any more. */ .facts .wrap::before{content:"";position:absolute;inset-block:0;z-index:1;width:1px; background:var(--navy);inset-inline-start:calc(var(--gutter) - var(--fact-pad) - 1px)} .fact{display:flex;gap:14px;align-items:center;padding:26px var(--fact-pad); box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)} .fact svg{flex:none;color:var(--gold)} .fact strong{display:block;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--text);font-variant-numeric:tabular-nums} .fact span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* ---------- Sections ---------- */ section.block{padding-block:var(--band)} .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px} .head h2{font-size:clamp(32px,4vw,48px);margin-top:12px} .head p{max-width:46ch;color:var(--muted);margin:0} .services{background:var(--ink)} .grid-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .svc{background:var(--navy);padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px;transition:background .25s} .svc:hover{background:var(--panel)} .svc-top{display:flex;gap:16px;align-items:flex-start} .svc-icon{flex:none;width:46px;height:46px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)} .svc h3{font-size:24px;font-weight:600} .svc p{margin:0;color:var(--muted);font-size:14px} .svc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px} .svc li{font-size:11px;padding:3px 9px;border:1px solid var(--line);color:#b7c1cd} .svc-all{grid-column:span var(--span,1);background:var(--panel);justify-content:center} .svc-all:hover{background:#17293f} .svc-all h3{font-family:var(--serif);font-size:24px;font-weight:600} .svc .more{margin-top:auto;padding-top:6px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;gap:8px;align-items:center} /* ---------- About (light) ---------- */ .about{background:var(--navy);color:var(--text)} .about .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center} .about h2{font-size:clamp(34px,4.2vw,52px);margin:12px 0 22px} .about h2 em{font-style:italic;color:var(--gold)} .about .eyebrow{color:var(--gold)} .about p{color:var(--muted);max-width:60ch;margin:0 0 16px} .about .btn-dark{background:var(--gold);color:var(--ink);border-color:var(--gold);margin-top:14px} .about .btn-dark:hover{background:var(--gold-soft)} .map-card{position:relative;color:var(--text);min-width:0} .map-card svg{display:block;width:100%;height:auto} /* Ten labels cannot be read on a 150px-tall drawing, so the phone gets the offices as a list and the map is not rendered at all. */ .coverage-list{display:none} @media (max-width:640px){ :root{--gutter:16px;--band:64px} .map-card > svg{display:none} .coverage-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;list-style:none;margin:0;padding:0} .coverage-list li{display:grid;gap:3px;padding-left:17px;position:relative} .coverage-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--gold)} .coverage-list b{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.15} .coverage-list span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .map-legend{grid-template-columns:1fr;gap:16px;margin-top:28px} } .map-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:26px} .map-legend div{display:flex;gap:12px} .map-legend svg{flex:none;width:28px;height:28px;color:var(--gold)} .map-legend b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)} .map-legend span{font-size:12.5px;color:var(--muted)} /* ---------- Process ---------- */ .process{background:var(--navy);text-align:center} .process .head{justify-content:center;text-align:center} .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;list-style:none;margin:0;padding:0;position:relative;--step-dot:68px} /* The rule is pinned to the middle of the dot, so it follows when the dot is resized. */ .steps::before{content:"";position:absolute;top:calc(var(--step-dot) / 2);left:10%;right:10%;border-top:1px dashed #3a506a} /* Each step is a grid so that one alignment value moves the dot, the number, the title and the paragraph together. Before this the dot centred itself with auto margins and the paragraph did the same, while the text took its alignment from whatever section the list sat in — three answers to the same question, and all three visible at once as soon as the widget was used outside .process. */ .step{position:relative;display:grid;justify-items:center;text-align:center; /* Steps stretch to the height of the tallest one; without this the grid would stretch its own rows to match and pull the parts of the shorter steps apart. */ align-content:start} .step-dot{width:var(--step-dot);height:var(--step-dot);margin:0 0 18px;border-radius:50%;border:1px solid var(--gold);background:var(--navy);display:grid;place-items:center;color:var(--gold)} .step-dot svg,.step-dot i{width:var(--step-icon,26px);height:var(--step-icon,26px);font-size:var(--step-icon,26px)} .step small{display:block;font-family:var(--serif);font-size:18px;color:var(--gold);font-style:italic} .step h3{font-size:22px;font-weight:600;margin:2px 0 8px} .step p{margin:0;color:var(--muted);font-size:13.5px;max-width:24ch} /* ---------- Fees ---------- */ .fees{background:var(--ink)} .fee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fee{border:1px solid var(--line);padding:30px 28px} .fee.feature{border-color:var(--gold);background:linear-gradient(180deg,rgba(198,161,91,.08),transparent 70%)} .fee .eyebrow{color:var(--muted)} .fee .price{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1.1;margin:14px 0 6px;font-variant-numeric:tabular-nums} .fee .price small{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:500} .fee p{margin:0;color:var(--muted);font-size:14px} .fees .note{margin-top:26px;font-size:14px;color:var(--muted)} /* ---------- CTA ---------- */ .cta{position:relative;background:var(--ink);border-block:1px solid var(--line);overflow:hidden} .cta .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-block:56px} .cta h2{font-size:clamp(32px,4vw,46px)} .cta p{margin:8px 0 0;color:#c4ccd6} .cta p b{color:var(--gold-soft)} /* The photograph sits under a left-weighted scrim so the headline keeps its contrast while the image still reads on the right. */ .cta-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;pointer-events:none} .cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 18%,rgba(10,20,34,.82) 52%,rgba(10,20,34,.45) 100%)} /* ---------- Footer ---------- */ footer{background:#07101b;font-size:13.5px;color:var(--muted)} .foot{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.4fr;gap:40px;padding-block:60px 40px} footer .logo img{height:min(var(--logo-h,42px),56px)} footer h4{font:700 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin:0 0 16px} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} footer a:hover{color:var(--gold)} .contact-line{display:flex;gap:10px;align-items:flex-start} .contact-line svg{flex:none;margin-top:4px;color:var(--gold)} .socials{display:flex;gap:8px;margin-top:18px} .socials a{width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700} .socials a:hover{border-color:var(--gold)} .legal{border-top:1px solid var(--line)} .legal .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px;font-size:12px} .legal nav{display:flex;gap:22px} /* ---------- Floating WhatsApp ---------- */ .wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4)} .wa:hover{background:var(--gold-soft)} /* ---------- Load motion ---------- */ /* Stacking the hero lines is layout, not motion. It used to live inside the prefers-reduced-motion query below, so a reader with reduced motion turned on saw "Intelligence. Evidence. Resolution." run together on one line instead of three. */ .ln{display:block} @media (prefers-reduced-motion:no-preference){ .hero h1 .ln{animation:rise .9s cubic-bezier(.2,.7,.2,1) both} .hero h1 .ln:nth-child(2){animation-delay:.12s} .hero h1 .ln:nth-child(3){animation-delay:.24s} @keyframes rise{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}} .win{animation:flick 6s infinite} @keyframes flick{0%,100%{opacity:.9}50%{opacity:.55}} } /* ---------- Responsive ---------- */ @media (max-width:1020px){ nav.main{display:none} nav.main.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--gold);padding:8px 24px 20px;max-height:calc(100dvh - 110px);overflow-y:auto;box-shadow:0 30px 60px rgba(0,0,0,.55)} nav.main.open > a,nav.main.open .mega-toggle{padding-block:14px;border-bottom:1px solid var(--line)} nav.main > a.on{border-color:var(--line)} .mega-toggle{width:100%;justify-content:space-between} .has-mega:hover .mega-toggle{border-color:var(--line)} .has-mega:hover:not(.open) .chev{transform:none} .mega{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;transition:none} .mega::before{display:none} .has-mega.open .mega{display:block} .mega .wrap{padding-inline:0} .mega-inner{grid-template-columns:1fr 1fr;gap:26px 28px;padding-block:20px 8px} .mega-col h3{font-size:19px;padding-bottom:10px;margin-bottom:6px} .mega-feature{grid-column:1/-1} .mega-foot{border-top:0} .mega-foot .wrap{padding-block:4px 10px} .menu-btn{display:block} header .btn-gold{display:none} .about .wrap{grid-template-columns:1fr} .facts .wrap{grid-template-columns:repeat(3,1fr)} .grid-svc,.fee-grid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr 1fr} .steps::before{display:none} .foot{grid-template-columns:1fr 1fr} } @media (max-width:640px){ /* moved on the tokens above, so every consumer follows */ .topbar .hide-sm{display:none} .hero .wrap{padding-block:72px 64px} .facts{--fact-pad:0px} .facts .wrap{grid-template-columns:1fr 1fr} /* Stacked, not side by side. The icon is 30px and the gap 14px, so an icon to the left of the label started every fact's text 44px in from the gutter while every other band on the page began at 16px. Above the text it also stops "Partner law firms" wrapping. No vertical rule at this width: with no side padding the columns would be split by a line sitting hard against the type. */ .fact{display:grid;gap:9px;align-items:start;padding-block:22px;box-shadow:0 -1px 0 var(--line)} .fact:last-child{grid-column:1/-1} .grid-svc,.fee-grid,.steps,.foot,.map-legend,.mega-inner{grid-template-columns:1fr} nav.main.open{padding-inline:16px} .mega-col a{padding-block:9px} .logo-name{font-size:22px} .logo img{height:min(var(--logo-h,42px),50px)} } /* ====================================================== COMPONENTS */ /* ========================================================= INNER PAGES & TEMPLATE COMPONENTS ========================================================= */ /* ---------- Page hero (inner) ---------- */ .page-hero{position:relative;overflow:hidden;background:radial-gradient(90% 120% at 85% 0%,#1a2d47 0%,var(--ink) 65%);border-bottom:1px solid var(--line)} /* The faint rule grid. Shared so an Elementor container can switch it on with a class instead of a copy of the declaration drifting out of step with the page hero. */ .page-hero::after, .gunma-lines::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.28;mask-image:linear-gradient(90deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);pointer-events:none} .gunma-lines{position:relative} /* --- What the container's Sync Padding & Margin switches turn on --------- Classes rather than generated numbers, so a container tracks the stylesheet instead of freezing a copy of today's values into the page's own CSS. */ /* Set the properties Elementor itself reads rather than overriding the rules it writes. Its container resolves width from --width, and sizes child widgets from --container-widget-width and --container-widget-flex-grow; a plain max-width here lost to its own rule and left the children shrink-wrapped and centred. */ /* The measure has to be applied the way the container is built. A boxed container already makes an inner column, so the measure belongs on that and the background keeps running edge to edge — the same arrangement as the theme's own section.block > .wrap. A full container has no inner and is the column itself. Elementor zeroes .e-con-inner's inline padding in a two-class rule, which is why the gutter here is written at three. */ .e-con-boxed.gunma-wrap-yes{--content-width:min(100%,var(--wrap))} .e-con-boxed.gunma-wrap-yes > .e-con-inner{ --padding-inline-start:var(--gutter);--padding-inline-end:var(--gutter); padding-inline:var(--gutter) } .e-con-full.gunma-wrap-yes, .gunma-wrap-yes:not(.e-con){ --width:min(100%,var(--wrap)); --content-width:min(100%,var(--wrap)); --container-widget-width:100%; --container-widget-flex-grow:1; width:min(100%,var(--wrap));max-width:min(100%,var(--wrap)); --padding-inline-start:var(--gutter);--padding-inline-end:var(--gutter); margin-inline:auto;padding-inline:var(--gutter) } .gunma-wrap-yes > .elementor-widget, .gunma-wrap-yes > .e-con-inner > .elementor-widget{width:100%} /* Elementor consumes --padding-block-start in its own rule `.e-con-full, .e-con > .e-con-inner { padding-block-start: var(--padding-block-start) }`, so setting the property was not enough: its rule still won and its default is 0. These match that selector at two classes instead of one. The consequence is that Section spacing owns the vertical padding while it is on — set it to "Elementor default" to type your own in the Advanced tab. */ .e-con-full.gunma-band-band, .e-con.gunma-band-band > .e-con-inner{padding-block:var(--band)} .e-con-full.gunma-band-band-t, .e-con.gunma-band-band-t > .e-con-inner{padding-block:var(--band) 0} .e-con-full.gunma-band-band-b, .e-con.gunma-band-band-b > .e-con-inner{padding-block:0 var(--band)} .e-con-full.gunma-band-flush, .e-con.gunma-band-flush > .e-con-inner{padding-block:0} /* and for a container that is neither, so the classes still mean something off-canvas */ .gunma-band-band{padding-block:var(--band)} .gunma-band-band-t{padding-block:var(--band) 0} .gunma-band-band-b{padding-block:0 var(--band)} .gunma-band-flush{padding-block:0} .gunma-surface.bg-ink{background:var(--ink)} .gunma-surface.bg-navy{background:var(--navy)} .gunma-surface.bg-paper{background:var(--paper);color:var(--paper-ink)} .gunma-lines > *{position:relative;z-index:1} .gunma-lines-tone-gold::after{background-image:linear-gradient(var(--gold) 1px,transparent 1px),linear-gradient(90deg,var(--gold) 1px,transparent 1px)} .gunma-lines-tone-light::after{background-image:linear-gradient(#3b5578 1px,transparent 1px),linear-gradient(90deg,#3b5578 1px,transparent 1px)} .gunma-lines-size-sm::after{background-size:40px 40px} .gunma-lines-size-lg::after{background-size:96px 96px} .gunma-lines-strength-soft::after{opacity:.14} .gunma-lines-strength-strong::after{opacity:.45} .gunma-lines-fade-right::after{-webkit-mask-image:linear-gradient(270deg,transparent 30%,#000 100%);mask-image:linear-gradient(270deg,transparent 30%,#000 100%)} .gunma-lines-fade-none::after{-webkit-mask-image:none;mask-image:none} /* --- Theme layout classes on an Elementor container ----------------------- The seeded pages mirror the PHP templates class for class, so a container can carry .wrap, .hero-split, .with-aside, .aside or .block. Elementor's container stylesheet loads after this one and sets display, gap, padding, margin, align-items and position on every container at the same weight those classes carry, so on a container they quietly lose all of them: a .wrap keeps no gutter and stops being centred, and the splits are laid out as a flex column. Naming the container's own class in the selector is enough to win it back. The .e-flex appears only in the display rules, because that is the one Elementor rule that matches at two classes rather than one. A page built by hand in the editor reaches the same numbers through the Sync Padding & Margin controls instead; both read --gutter and --band, so they cannot drift apart. */ .e-con.block{padding-block:var(--band)} .e-con.block.flush-b{padding-bottom:0} .e-con.wrap{margin-inline:auto;padding-inline:var(--gutter);gap:0} .e-con.e-flex.hero-split{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end} .e-con.e-flex.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start} .e-con.e-flex.aside{display:grid;gap:22px;position:sticky} .e-con.e-flex.two-col{display:grid;gap:56px} .e-con.process{text-align:center} .e-con.e-flex.ctas{flex-direction:row;flex-wrap:wrap;gap:14px 22px;align-items:center} .e-con.e-flex.stack{display:grid;gap:16px} /* A .wrap the theme turns into a grid for the section it sits in. */ .e-con.hero > .e-con.wrap{display:grid;gap:0} .e-con.about > .e-con.wrap{display:grid;gap:56px} /* The home hero's photograph is a layer of its own in the template (.hero-bg, with the gradient on its ::after). A container has no such layer, so an Elementor hero paints the gradient and the photograph on itself, in that order. */ .e-con.hero{background-image:linear-gradient(90deg,var(--ink) 4%,rgba(10,20,34,.9) 46%,rgba(10,20,34,.5) 100%),url("../img/hero.webp");background-size:cover;background-position:center 34%} @media (max-width:1020px){ .e-con.e-flex.hero-split, .e-con.e-flex.with-aside{grid-template-columns:1fr} .e-con.e-flex.aside{position:static} } /* --- Heading widget ------------------------------------------------------ The heading used to be three lines so each could rise on its own. It is one heading now, so the whole thing rises once, and only where motion is welcome. */ @media (prefers-reduced-motion:no-preference){ .gunma-rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both} } /* The size is contextual in the stylesheet (.hero h1 is not .page-hero h1), so a heading dropped into a plain container had no size at all. These give it one explicitly. */ .gunma-h-hero{font-size:clamp(44px,6.4vw,82px);letter-spacing:-.01em} .gunma-h-page{font-size:clamp(38px,5.4vw,66px);max-width:18ch} .gunma-h-compact{font-size:clamp(34px,4.4vw,52px);max-width:24ch} .gunma-h-section{font-size:clamp(32px,4vw,48px)} .gunma-h-minor{font-size:clamp(30px,3.6vw,42px)} .gunma-heading em{font-style:italic;color:var(--gold)} .gunma-heading .lead{max-width:60ch;color:#c4ccd6;font-size:16.5px;margin:20px 0 0} .gunma-heading .lead p{margin:0 0 .8em} .gunma-heading .lead p:last-child{margin-bottom:0} .page-hero .wrap{position:relative;z-index:1;padding-block:56px 60px} .page-hero h1{font-size:clamp(38px,5.4vw,66px);margin-top:14px;max-width:18ch} .page-hero h1 em{font-style:italic;color:var(--gold)} .page-hero .lead{max-width:60ch;color:#c4ccd6;font-size:16.5px;margin:20px 0 0} .page-hero .ctas{margin-top:30px} .page-hero.compact .wrap{padding-block:44px 46px} .page-hero.compact h1{font-size:clamp(34px,4.4vw,52px);max-width:24ch} .hero-split{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end} .hero-meta{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .hero-meta div{background:rgba(15,29,48,.9);padding:16px 18px;display:flex;justify-content:space-between;gap:16px;font-size:13px} .hero-meta span{color:var(--muted)} .hero-meta b{color:var(--text);font-weight:600;text-align:right} .crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--muted)} .crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)} .crumbs a:hover{color:var(--gold)} .crumbs [aria-current]{color:var(--gold-soft)} /* ---------- Generic section helpers ---------- */ .bg-ink{background:var(--ink)} .bg-navy{background:var(--navy)} .bg-paper{background:var(--paper);color:var(--paper-ink)} .bg-paper .eyebrow{color:#8a6a2c} .bg-paper .head p,.bg-paper p{color:var(--paper-muted)} .bg-paper h2 em{font-style:italic;color:#8a6a2c} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .two-col.center{align-items:center} .stack{display:grid;gap:16px} .stack p{margin:0} .big-year{font-family:var(--serif);font-size:clamp(90px,14vw,180px);line-height:.85;color:var(--gold);font-weight:500;letter-spacing:-.02em} .big-year small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:14px} /* ---------- Feature grid (icon + text) ---------- */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .features.cols-2{grid-template-columns:repeat(2,1fr)} .features.cols-4{grid-template-columns:repeat(4,1fr)} .feature{background:var(--navy);padding:28px 26px;display:flex;flex-direction:column;gap:10px} .feature .svc-icon{margin-bottom:6px} .feature h3{font-size:22px;font-weight:600} .feature p{margin:0;color:var(--muted);font-size:14px} .bg-paper .features{background:#cfc8b8;border-color:#cfc8b8} .bg-paper .feature{background:var(--paper)} .bg-paper .feature h3{color:var(--paper-ink)} .bg-paper .feature .svc-icon{border-color:#8a6a2c;color:#8a6a2c} /* ---------- Numbered list (real sequences only) ---------- */ .seq{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:seq} .seq li{counter-increment:seq;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)} .seq li:last-child{border-bottom:1px solid var(--line)} .seq li::before{content:counter(seq,decimal-leading-zero);font-family:var(--serif);font-style:italic;font-size:30px;color:var(--gold);line-height:1} .seq h3{font-size:22px;font-weight:600;margin-bottom:4px} .seq p{margin:0;color:var(--muted);font-size:14px} /* ---------- Check list ---------- */ .checks{list-style:none;margin:0;padding:0;display:grid;gap:10px} .checks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start} .checks li::before{content:"";width:14px;height:8px;margin-top:6px;border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)} .checks.two{grid-template-columns:1fr 1fr;column-gap:28px} .bg-paper .checks li::before{border-color:#8a6a2c} /* ---------- Credentials ---------- */ .badges{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .badge{background:var(--ink);padding:22px 14px;text-align:center;display:grid;gap:6px;justify-items:center} .badge .seal{width:56px;height:56px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--gold);font-size:15px;letter-spacing:.04em} .badge b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)} .badge span{font-size:11.5px;color:var(--muted);line-height:1.4} /* ---------- Quote / pull ---------- */ .pull{font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);line-height:1.25;font-style:italic;max-width:30ch;margin:0} .pull::before{content:"“";display:block;font-size:80px;line-height:.6;color:var(--gold);font-style:normal;margin-bottom:10px} .pull-cite{margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} /* ---------- Service hub ---------- */ .cat{display:grid;grid-template-columns:320px 1fr;gap:48px;padding-block:48px;border-top:1px solid var(--line)} .cat:first-of-type{border-top:0;padding-top:0} .cat-head h2{font-size:34px;margin:12px 0 12px} .cat-head p{color:var(--muted);margin:0 0 20px;font-size:14.5px} .cat-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);align-self:start} .cat-list a{background:var(--navy);padding:20px 22px;display:grid;gap:6px;transition:background .2s} .cat-list a:hover{background:var(--panel)} .cat-list b{font-family:var(--serif);font-size:21px;font-weight:600;display:flex;justify-content:space-between;gap:10px;align-items:baseline} .cat-list b .arrow{color:var(--gold);font-family:var(--sans);font-size:14px} .cat-list span{font-size:13.5px;color:var(--muted)} .cat-list.odd a:last-child{grid-column:1/-1} /* ---------- Layout with sidebar ---------- */ .with-aside{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start} .aside{display:grid;gap:22px;position:sticky;top:calc(96px + env(safe-area-inset-top,0px))} .widget{border:1px solid var(--line);padding:24px;background:var(--navy)} .widget h4{font:700 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px} .widget ul{list-style:none;margin:0;padding:0;display:grid} .widget li a{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;color:#c4ccd6} .widget li:first-child a{border-top:0;padding-top:0} .widget li a:hover,.widget li a[aria-current]{color:var(--gold-soft)} .widget li a small{color:var(--muted);font-variant-numeric:tabular-nums} .widget-cta{background:linear-gradient(160deg,#1a2c45,#0f1d30);border-color:var(--gold)} .widget-cta h3{font-size:26px;font-weight:600;margin-bottom:8px} .widget-cta p{margin:0 0 14px;color:var(--muted);font-size:13.5px} .widget-cta .hotline{display:block;font-family:var(--serif);font-size:26px;color:var(--gold-soft);margin-bottom:16px} .widget-cta .btn{width:100%;justify-content:center} .widget-cta .btn + .btn{margin-top:10px} /* Contents: a band above the article that folds away once reading starts. */ .toc{border:1px solid var(--line);margin:0 0 36px;max-width:72ch} /* One copy per breakpoint: the rail above 1020px, above the prose below it. */ .toc-rail{margin:0;max-width:none} .toc-phone{display:none} @media (max-width:1020px){.toc-rail{display:none}.toc-phone{display:block}} /* The rail scrolls with the reader, so a long outline must not outgrow the viewport. */ .toc-rail ol{max-height:calc(100vh - 260px);overflow-y:auto;scrollbar-width:thin} .toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:14px 18px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .toc summary::-webkit-details-marker{display:none} .toc summary::after{content:"";flex:none;width:8px;height:8px;margin-bottom:3px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg);transition:transform .2s} .toc[open] summary::after{transform:rotate(225deg);margin:3px 0 0} .toc summary:hover{color:var(--gold-soft)} .toc ol{margin:0;padding:0 18px 18px 38px;display:grid;gap:8px;font-size:14px;color:#c4ccd6} .toc a:hover{color:var(--gold-soft)} @media (prefers-reduced-motion: reduce){.toc summary::after{transition:none}} .bg-paper .widget{background:#f5f2ec;border-color:#d9d2c3} .bg-paper .widget li a{border-color:#d9d2c3;color:var(--paper-ink)} .bg-paper .widget li a[aria-current]{color:var(--paper-ink);font-weight:600} .widget li a[aria-current] span{color:var(--gold)} .bg-paper .widget h4{color:#8a6a2c} .bg-paper .toc{border-color:#d9d2c3;background:rgba(255,255,255,.5)} .bg-paper .toc summary{color:#8a6a2c} .bg-paper .toc ol{color:var(--paper-ink)} .bg-paper .widget-cta{background:var(--paper-ink);border-color:var(--paper-ink);color:var(--text)} .bg-paper .widget-cta p{color:var(--muted)} /* ---------- Search form ---------- */ .search-form{display:flex;border:1px solid var(--line);background:var(--ink)} .search-form input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:15px var(--sans);padding:14px 16px} .search-form input::placeholder{color:#6f7d8e} .search-form input:focus{outline:none} .search-form:focus-within{border-color:var(--gold)} .search-form button{background:var(--gold);color:var(--ink);border:0;padding:0 18px;cursor:pointer;display:grid;place-items:center} .search-form.lg input{font-size:18px;padding:18px 20px} .search-form.lg button{padding:0 26px} .bg-paper .search-form{background:#fff;border-color:#d9d2c3} .bg-paper .search-form input{color:var(--paper-ink)} /* ---------- Prose (long-form content on paper) ---------- */ /* Body copy reads dark first, like every other component here, with the paper values scoped to .bg-paper. It was the other way round, which is why moving the service pages onto a dark band left the prose at #2a3649 on near-black. */ .prose{font-size:17px;line-height:1.75;color:#c4ccd6;max-width:70ch} .prose > *{margin:0 0 1.1em} .prose h2{font-size:34px;color:var(--text);margin:1.6em 0 .5em;scroll-margin-top:110px} .prose h3{font-size:25px;color:var(--text);margin:1.4em 0 .4em;font-weight:600} .prose a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose a:hover{color:var(--gold)} .prose ul,.prose ol{padding-left:1.3em} .prose li{margin-bottom:.4em} .prose li::marker{color:var(--gold)} .prose blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:2px solid var(--gold);font-family:var(--serif);font-size:25px;line-height:1.4;font-style:italic;color:var(--text)} .prose figure{margin:1.8em 0} .prose figcaption{font-size:13px;color:var(--muted);margin-top:8px} .prose table{width:100%;border-collapse:collapse;font-size:15px} .prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)} .prose th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .prose .table-wrap{overflow-x:auto} .prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0} .lede{font-size:20px;line-height:1.6;color:var(--text)} .bg-paper .prose{color:#2a3649} .bg-paper .prose h2,.bg-paper .prose h3,.bg-paper .prose blockquote,.bg-paper .lede{color:var(--paper-ink)} .bg-paper .prose a{color:#7a5a1f} .bg-paper .prose a:hover{color:var(--paper-ink)} .bg-paper .prose li::marker{color:#8a6a2c} .bg-paper .prose figcaption,.bg-paper .prose th{color:var(--paper-muted)} .bg-paper .prose th,.bg-paper .prose td,.bg-paper .prose hr{border-color:#d9d2c3} /* On paper the callout is the dark block; on a dark band it needs its own edge instead. */ .callout{background:var(--panel);color:var(--text);border-left:2px solid var(--gold);padding:28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin:2em 0} .bg-paper .callout{background:var(--paper-ink);border-left:0} .callout h3{font-size:24px;color:var(--text);margin:0 0 4px} .callout p{margin:0;color:var(--muted);font-size:14.5px} /* A quiet footnote, not a boxed warning: a bordered light panel on the light fees band read as something disabled. A gold rule and smaller type say 'aside'. */ .note{margin-top:30px;padding:2px 0 2px 16px;border-left:2px solid var(--gold);background:none; font-size:14px;line-height:1.6;color:var(--muted);max-width:74ch} .note b{color:var(--text)} .bg-paper .note,.about .note{color:var(--paper-muted)} .bg-paper .note b,.about .note b{color:var(--paper-ink)} /* ---------- Post meta, cards ---------- */ .meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted);align-items:center} .meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6} .chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(198,161,91,.45);padding:4px 9px} .chip:hover{background:rgba(198,161,91,.12)} .thumb{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:linear-gradient(140deg,#1b3050,#0b1626 70%);border:1px solid var(--line)} .thumb::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#2e4668 1px,transparent 1.2px);background-size:12px 12px;opacity:.7} .thumb svg{position:absolute;right:18px;bottom:16px;width:56px;height:56px;color:var(--gold);opacity:.85} .thumb .t-label{position:absolute;left:16px;top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);opacity:.8} .thumb.alt{background:linear-gradient(140deg,#2c2618,#0b1626 70%)} .thumb.alt2{background:linear-gradient(140deg,#16334a,#0b1626 70%)} .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px} .post-card{display:flex;flex-direction:column;gap:14px} .post-card h3{font-size:24px;font-weight:600;line-height:1.18} .post-card h3 a:hover{color:var(--gold-soft)} .post-card p{margin:0;color:var(--muted);font-size:14px} .post-card .more{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;gap:8px;align-items:center;margin-top:auto} .post-card .thumb{transition:border-color .2s} .post-card:hover .thumb{border-color:var(--gold)} .post-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line)} .post-feature h2{font-size:clamp(30px,3.4vw,42px);margin:14px 0 14px} .post-feature h2 a:hover{color:var(--gold-soft)} .post-feature p{color:var(--muted);margin:0 0 20px;max-width:52ch} .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px} /* Inside a .ctas row the filters are part of that row: no bottom margin of their own, and a nested .ctas — a buttons widget sitting beside a filters widget — must not repeat the row's top margin. Both were inline styles on the template's own markup. */ .ctas .filters{margin-bottom:0} .ctas .ctas{margin-top:0} .filters a{font-size:12px;font-weight:600;letter-spacing:.08em;padding:9px 14px;border:1px solid var(--line);color:#c4ccd6} .filters a:hover{border-color:var(--gold);color:var(--gold-soft)} .filters a[aria-current]{background:var(--gold);color:var(--ink);border-color:var(--gold)} .filters small{opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums} /* ---------- Pagination ---------- */ .pagination{display:flex;justify-content:center;gap:6px;margin-top:64px;flex-wrap:wrap} .pagination a,.pagination span{min-width:44px;height:44px;display:grid;place-items:center;padding-inline:12px;border:1px solid var(--line);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums} .pagination a:hover{border-color:var(--gold);color:var(--gold)} .pagination [aria-current]{background:var(--gold);border-color:var(--gold);color:var(--ink)} .pagination .gap,.pagination .dots{border:0;min-width:20px} /* ---------- Search results list ---------- */ .results{list-style:none;margin:0;padding:0} .result{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--line)} .result:last-child{border-bottom:1px solid var(--line)} .result h3{font-size:25px;font-weight:600;margin:8px 0} .result h3 a:hover{color:var(--gold-soft)} .result p{margin:0;color:var(--muted);font-size:14.5px} .result mark{background:rgba(198,161,91,.22);color:var(--gold-soft);padding:0 2px} .result .url{font-size:12px;color:#6f7d8e;margin-top:8px;word-break:break-all} .result .type{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* ---------- Single post ---------- */ .post-head{max-width:880px} .post-head h1{font-size:clamp(36px,5vw,60px);margin:18px 0 22px;max-width:22ch} .featured{margin:-1px 0 0} .featured .thumb{aspect-ratio:21/9;border:0} .featured .thumb svg{width:90px;height:90px;right:32px;bottom:28px} .author-box{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px;border:1px solid #d9d2c3;background:#f5f2ec;margin-top:48px} .author-box .avatar{width:64px;height:64px;border-radius:50%;background:var(--paper-ink);display:grid;place-items:center} .author-box b{font-family:var(--serif);font-size:22px;color:var(--paper-ink);font-weight:600} .author-box p{margin:4px 0 0;font-size:14.5px;color:var(--paper-muted)} .post-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid #d9d2c3} .tags{display:flex;flex-wrap:wrap;gap:8px} .tags a{font-size:12px;padding:6px 11px;border:1px solid #cfc8b8;color:var(--paper-ink)} .tags a:hover{border-color:#8a6a2c;color:#8a6a2c} .share{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-muted);font-weight:700} .share a{width:36px;height:36px;border:1px solid #cfc8b8;display:grid;place-items:center;color:var(--paper-ink);letter-spacing:0;text-transform:none} .share a:hover{border-color:#8a6a2c;color:#8a6a2c} .prev-next{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)} .prev-next a{background:var(--navy);padding:28px 24px;display:grid;gap:6px} .prev-next a:hover{background:var(--panel)} .prev-next a:last-child{text-align:right} .prev-next.is-one{grid-template-columns:1fr} .prev-next.is-one a{text-align:left} .prev-next small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .prev-next b{font-family:var(--serif);font-size:22px;font-weight:600} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--serif);font-size:23px;font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:26px;color:var(--gold);transition:transform .2s;flex:none} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--gold-soft)} .faq .ans{padding:0 0 22px;color:var(--muted);max-width:70ch} .faq .ans p{margin:0 0 10px} .bg-paper .faq,.bg-paper .faq details{border-color:#d9d2c3} .bg-paper .faq summary{color:var(--paper-ink)} .bg-paper .faq summary:hover{color:#8a6a2c} .bg-paper .faq summary::after{color:#8a6a2c} /* ---------- Testimonials ---------- */ .quotes{columns:3 300px;column-gap:24px} .quote{break-inside:avoid;margin:0 0 24px;border:1px solid var(--line);background:var(--navy);padding:28px 26px;display:grid;gap:16px} .quote .stars{color:var(--gold);letter-spacing:3px;font-size:13px} .quote blockquote{margin:0;font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--text)} .quote figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px} .quote figcaption b{color:var(--text);font-weight:600;display:block} .placeholder{outline:1px dashed rgba(198,161,91,.55);outline-offset:4px} .ph-note{font-size:11px;color:var(--gold-soft);letter-spacing:.06em;font-family:var(--sans);font-style:normal} /* ---------- Forms ---------- */ .form{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:grid;gap:8px} .field.full{grid-column:1/-1} .field label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#c4ccd6} .field label i{font-style:normal;color:var(--gold)} .field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text);font:15px var(--sans);padding:13px 14px;border-radius:0;appearance:none} .field select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)} .field .hint{font-size:12px;color:var(--muted)} .consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted)} .consent input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:none} .form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .form-foot .btn{cursor:pointer} .form-status{grid-column:1/-1;border:1px solid var(--gold);background:rgba(198,161,91,.1);padding:14px 16px;font-size:14px} .contact-cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .contact-card{background:var(--navy);padding:24px;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start} .contact-card .svc-icon{width:44px;height:44px} .contact-card b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:4px} .contact-card .v{font-family:var(--serif);font-size:23px;color:var(--text);line-height:1.25;overflow-wrap:anywhere} /* An email address is one long word, and a long word sets the card's minimum width: the address card refused to go under 333px and pushed the page sideways on every phone. word-break:break-word does not help — it lets the text wrap but leaves the intrinsic minimum at the full string. overflow-wrap:anywhere lowers the minimum as well. */ .contact-card small{display:block;color:var(--muted);font-size:13px;margin-top:4px;overflow-wrap:anywhere} .contact-card .copy{margin-top:10px;background:none;border:1px solid var(--line);color:var(--text);font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;cursor:pointer} .contact-card .copy:hover{border-color:var(--gold);color:var(--gold)} /* ---------- Branches ---------- */ .branches{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .branch{background:var(--navy);padding:24px 24px 22px;display:grid;gap:8px;align-content:start} .branch-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .branch h3{font-size:24px;font-weight:600;color:var(--text)} .branch .state{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .branch address{font-style:normal;font-size:14px;color:var(--muted);line-height:1.55} .branch .tag{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:4px 8px} .branch a.dir{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-top:6px} .branch a.dir:hover{color:var(--gold-soft)} /* The leftover cells: the photograph, dimmed enough to read a line of type over. */ .branch-photo{position:relative;overflow:hidden;grid-column:span var(--span,1); background-size:cover;background-position:center 40%;align-content:end;padding:0} .branch-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,34,.25),rgba(10,20,34,.9))} .branch-photo > div{position:relative;padding:24px} .branch-photo h3{margin:4px 0 6px} .branch-photo p{margin:0;font-size:13.5px;color:#c4ccd6;max-width:46ch} /* One column on a phone, so a cell still asking to span two would invent an implicit second column and push the whole page 51px wider than the screen. */ @media (max-width:640px){.branch-photo{grid-column:auto}} /* Kept for any paper-backed use of the grid. */ .bg-paper .branches{background:#cfc8b8;border-color:#cfc8b8} .bg-paper .branch{background:var(--paper)} .bg-paper .branch h3{color:var(--paper-ink)} .bg-paper .branch .state,.bg-paper .branch address{color:var(--paper-muted)} .bg-paper .branch .tag{background:var(--paper-ink);color:var(--gold-soft)} .bg-paper .branch a.dir{color:#7a5a1f} .bg-paper .branch a.dir:hover{color:var(--paper-ink)} /* ---------- Contact: the main office on a map ---------- */ /* The map runs edge to edge; the card is put back on the content grid by an overlay that is itself a .wrap, so it lines up with the heading above it at every width. The overlay ignores the pointer so the map underneath stays draggable. Google's embed has no dark mode without an API key, so it is inverted and hue-rotated back into the palette. That also flips Google's own mark and the map-error link, which is the cost of the effect. This could not be rendered here: Chrome in this sandbox has no network, so the filter is written to spec rather than tuned against a screenshot. */ /* The map is the last thing in its section and runs to the edge, so the section's own bottom padding would read as a strip of empty band under it. */ .block.flush-b{padding-bottom:0} .office-map{position:relative;overflow:hidden;background:var(--panel)} .office-map iframe{display:block;width:100%;height:400px;border:0; filter:invert(100%) hue-rotate(180deg) saturate(.78) contrast(.92)} .office-overlay{position:absolute;inset:0;display:grid;align-content:center;pointer-events:none} /* Trimmed to about 335px so that centring it in a 400px map leaves a visible, equal band of map above and below rather than the 9px the full-size card left. */ .office-card{width:min(380px,100%);background:rgba(10,20,34,.94);padding:22px; display:grid;gap:9px;pointer-events:auto;backdrop-filter:blur(2px)} .office-card h3{font-size:24px;font-weight:600;line-height:1.15} .office-card address{font-style:normal;font-size:14px;color:var(--muted);line-height:1.55;margin:0} .office-card dl{margin:0;display:grid;gap:6px;font-size:13.5px} .office-card dl div{display:flex;justify-content:space-between;gap:16px; border-top:1px solid var(--line);padding-top:6px} .office-card dt{color:var(--muted)} /* The email address is one long word, and a long word sets the card's minimum width: at 320px the card insisted on 336px and the map, which clips, cut the right-hand margin off. Breaking it lowers the minimum as well as letting it wrap. */ .office-card dd{margin:0;text-align:right;color:var(--text);overflow-wrap:anywhere} .office-card dd a:hover{color:var(--gold)} .office-card .btn{justify-content:center;margin-top:3px;padding-block:12px} @media (max-width:860px){ /* No room beside the map, so the card drops under it and the overlay stops overlaying. */ .office-map iframe{height:300px} .office-overlay{position:static;padding-block:0} .office-card{width:auto;background:var(--panel);backdrop-filter:none} } /* ---------- 404 ---------- */ .nf{position:relative;overflow:hidden;background:radial-gradient(80% 100% at 70% 30%,#1a2d47,var(--ink) 70%)} .nf .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-block:90px 100px} .nf-code{font-family:var(--serif);font-size:clamp(130px,22vw,280px);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--gold);letter-spacing:-.03em;position:relative} .nf-code span{color:var(--gold);-webkit-text-stroke:0} .nf h1{font-size:clamp(36px,4.6vw,56px);margin:14px 0 16px} .nf p{color:#c4ccd6;max-width:46ch;margin:0 0 26px} .nf .quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} /* ---------- Case file label (subject detail) ---------- */ .file-tab{display:inline-flex;gap:10px;align-items:center;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--line);padding:8px 12px;background:rgba(7,16,27,.6)} .file-tab i{width:6px;height:6px;border-radius:50%;background:var(--gold);font-style:normal} /* ---------- Related / small cta strip ---------- */ .related{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .related a{background:var(--navy);padding:24px;display:grid;gap:8px} .related a:hover{background:var(--panel)} .related b{font-family:var(--serif);font-size:22px;font-weight:600;display:flex;justify-content:space-between;gap:8px} .related b .arrow{color:var(--gold);font-family:var(--sans);font-size:14px} .related span{color:var(--muted);font-size:13.5px} /* ---------- Responsive (inner pages) ---------- */ @media (max-width:1020px){ .hero-split,.two-col,.with-aside,.cat,.post-feature,.nf .wrap{grid-template-columns:1fr} .aside{position:static} .features,.features.cols-4{grid-template-columns:1fr 1fr} .badges{grid-template-columns:repeat(3,1fr)} .posts,.branches,.related{grid-template-columns:1fr 1fr} .cat{gap:28px} .nf .wrap{padding-block:64px 72px;gap:20px} } @media (max-width:640px){ .features,.features.cols-2,.features.cols-4,.posts,.branches,.related,.cat-list,.form,.prev-next,.checks.two{grid-template-columns:1fr} /* Three stacked cards push the footer a long way down; a swipe keeps the strip one screen tall and still shows there is more than one. */ .posts.posts-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch} .posts.posts-slider::-webkit-scrollbar{display:none} .posts.posts-slider > *{flex:0 0 80%;scroll-snap-align:start} .badges{grid-template-columns:1fr 1fr} .result{grid-template-columns:1fr;gap:14px} .result .thumb{display:none} .callout{grid-template-columns:1fr} .prev-next a:last-child{text-align:left} .prose{font-size:16px} .prose h2{font-size:28px} .seq li{grid-template-columns:44px 1fr;gap:14px} .cat-list.odd a:last-child{grid-column:auto} } /* current-section state for Services in the header */ .has-mega.current .mega-toggle{color:var(--text);border-color:var(--gold)} @media (max-width:1020px){.has-mega.current .mega-toggle{border-color:var(--line);color:var(--gold-soft)}} .bg-paper .seq li{border-color:#d9d2c3} .bg-paper .seq li::before{color:#8a6a2c} .bg-paper .seq h3{color:var(--paper-ink)} .bg-paper .seq p,.bg-paper .feature p{color:var(--paper-muted)} .bg-paper .callout .btn-gold{color:var(--ink)} article > .features,article > .checks,article > .seq,article > .faq{margin-bottom:8px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* --- Real images --------------------------------------------------------- The static template contains no at all: every picture in it is either an inline SVG or a .thumb placeholder div, so nothing ever needed to constrain one. Feed it a real 1600x900 photograph and it renders at intrinsic size and bursts straight out of its grid cell — which is what the blog feed did the moment the posts' featured images appeared. One global rule, then a consistent crop wherever a photo sits in a card. */ img{max-width:100%;height:auto} /* :first-child, not every link: the panel fill is for the picture, and without the restriction it also painted a block behind the card's Read more. */ .post-card > a:first-child, .post-feature > a{display:block;overflow:hidden;background:var(--panel)} .post-card > a:first-child img, .post-feature > a img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)} .post-card:hover > a:first-child img, .post-feature:hover > a img{transform:scale(1.04)} .post-feature > a img{aspect-ratio:4/3} /* ==================================================== THEME ADDITIONS === Everything below is this theme's, not the static template's: the pieces the WordPress build needs that a set of flat HTML pages never had to solve. */ /* --- Back to top --------------------------------------------------------- Same diameter as the chat button and stacked directly above it, so the two read as one control rather than two things that happen to float in the same corner. */ .to-top{ position:fixed;right:20px;bottom:calc(20px + 54px + 12px + env(safe-area-inset-bottom,0px)); z-index:30;width:54px;height:54px;border-radius:50%;padding:0;cursor:pointer; display:grid;place-items:center; background:var(--panel);color:var(--gold);border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0;transform:translateY(8px); transition:opacity .22s ease,transform .22s ease,background .2s ease,color .2s ease,border-color .2s } .to-top[hidden]{display:none} .to-top.is-on{opacity:1;transform:none} .to-top:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)} @media (prefers-reduced-motion: reduce){.to-top{transition:none}} /* --- Footer social marks ------------------------------------------------- Real brand glyphs rather than the template's two-letter text, so they are recognisable at 34px. They inherit currentColor, which is what makes the hover work. */ .socials a svg{width:16px;height:16px;fill:currentColor} .socials a{color:var(--muted);transition:color .2s,border-color .2s} .socials a:hover{color:var(--gold);border-color:var(--gold)} /* --- About: the story timeline ------------------------------------------ Three chapters on a rule. The year sits in its own column so the markers line up however long the headings run. */ /* Unscoped from .story: this is a component, and a Timeline widget dropped into any container was rendering an unstyled
    because every rule needed a .story ancestor. */ .timeline{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0} .timeline li{display:grid;grid-template-columns:180px 1fr;gap:40px;padding:30px 0;border-top:1px solid var(--line);position:relative} .timeline li:last-child{border-bottom:1px solid var(--line)} .t-year{font-family:var(--serif);font-size:clamp(32px,4vw,52px);line-height:1;color:var(--gold);font-weight:500;letter-spacing:-.02em;text-align:right;display:block} .timeline h3{font-size:24px;font-weight:600;margin-bottom:10px} .timeline p{margin:0;color:var(--muted);max-width:64ch} /* The rule that runs through the year column, with a node at each chapter. */ .timeline li::before{content:'';position:absolute;left:200px;top:0;bottom:0;width:1px;background:var(--line)} .timeline li::after{content:'';position:absolute;left:200px;top:36px;width:9px;height:9px;border-radius:50%;background:var(--gold);transform:translate(-4px,0)} @media (max-width:760px){ .timeline li{grid-template-columns:1fr;gap:10px} .t-year{text-align:left} .timeline li::before,.timeline li::after{display:none} } /* --- Testimonials: the screenshot grid ---------------------------------- No frames on the pictures: they are already screenshots with their own chrome, and a border around a border looked broken. Nor are they cropped any more: a chat thread cut to a fixed ratio loses the half of the message that says why the client was happy. They are laid out in columns instead of a grid so that pictures of six different heights still pack without leaving holes under the short ones. */ .shots{columns:3;column-gap:20px} .shots figure{margin:0 0 20px;break-inside:avoid} .shots figure img{display:block;width:100%;height:auto;border-radius:6px} @media (max-width:640px){.shots{columns:2;column-gap:14px}.shots figure{margin-bottom:14px}} /* The reveal. Hidden from the first paint, because the script is deferred and a class added afterwards would show every picture and then snatch it back. The template carries a